[No QA] [TS migration] Migrate 'CustomStatusBar' component to TypeScript

src/components/CustomStatusBar/index.android.js → src/components/CustomStatusBar/index.android.tsx

@@ -1,10 +1,15 @@
 /**
  * On Android we setup the status bar in native code.
  */
+import type CustomStatusBarType from './types';
 
-export default function CustomStatusBar() {
+// eslint-disable-next-line react/function-component-definition
+const CustomStatusBar: CustomStatusBarType = () =>
     // Prefer to not render the StatusBar component in Android as it can cause
     // issues with edge to edge display. We setup the status bar appearance in
     // MainActivity.java and styles.xml.
-    return null;
-}
+    null;
+
+CustomStatusBar.displayName = 'CustomStatusBar';
+
+export default CustomStatusBar;

src/components/CustomStatusBar/index.js → src/components/CustomStatusBar/index.tsx

@@ -2,8 +2,10 @@ import React, {useEffect} from 'react';
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
+import type CustomStatusBarType from './types';
 
-function CustomStatusBar() {
+// eslint-disable-next-line react/function-component-definition
+const CustomStatusBar: CustomStatusBarType = () => {
     const theme = useTheme();
     useEffect(() => {
         Navigation.isNavigationReady().then(() => {
@@ -20,7 +22,7 @@ function CustomStatusBar() {
         });
     }, [theme.PAGE_BACKGROUND_COLORS, theme.appBG]);
     return <StatusBar />;
-}
+};
 
 CustomStatusBar.displayName = 'CustomStatusBar';
 

src/components/CustomStatusBar/types.ts

@@ -0,0 +1,6 @@
+type CustomStatusBar = {
+    (): React.ReactNode;
+    displayName: string;
+};
+
+export default CustomStatusBar;