Merge pull request #27368 from software-mansion-labs/ts-migration/Sta…

…tusBar

src/libs/StatusBar/index.android.js → src/libs/StatusBar/index.android.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {StatusBar} from 'react-native';
+import StatusBar from './types';
 
 // Only has custom web implementation
 StatusBar.getBackgroundColor = () => null;
@@ -8,5 +7,4 @@ StatusBar.getBackgroundColor = () => null;
 // Also because Reanimated's interpolateColor gives Android native colors instead of hex strings, causing this to display a warning.
 StatusBar.setBackgroundColor = () => null;
 
-// Just export StatusBar – no changes.
 export default StatusBar;

src/libs/StatusBar/index.js → src/libs/StatusBar/index.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {StatusBar} from 'react-native';
+import StatusBar from './types';
 
 // Only has custom web implementation
 StatusBar.getBackgroundColor = () => null;

src/libs/StatusBar/index.web.ts

@@ -0,0 +1,23 @@
+import StatusBar from './types';
+
+StatusBar.getBackgroundColor = () => {
+    const element = document.querySelector<HTMLMetaElement>('meta[name=theme-color]');
+
+    if (!element?.content) {
+        return null;
+    }
+
+    return element.content;
+};
+
+StatusBar.setBackgroundColor = (backgroundColor) => {
+    const element = document.querySelector<HTMLMetaElement>('meta[name=theme-color]');
+
+    if (!element) {
+        return;
+    }
+
+    element.content = backgroundColor as string;
+};
+
+export default StatusBar;

src/libs/StatusBar/types.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line no-restricted-imports
+import {StatusBar as StatusBarRN} from 'react-native';
+
+type StatusBarExtended = typeof StatusBarRN & {
+    getBackgroundColor(): string | null;
+};
+
+const StatusBar = StatusBarRN as StatusBarExtended;
+
+export default StatusBar;