fix(wallet-mobile): Status bar styles with hook and theme (#3121)

Author: jorbuedo

apps/wallet-mobile/src/Dashboard/Dashboard.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {ActivityIndicator, RefreshControl, ScrollView, StyleSheet, View, ViewProps} from 'react-native'
 
-import {Banner, Button, StatusBar, useModal} from '../components'
+import {Banner, Button, useModal} from '../components'
 import {
   useGovernanceStrings,
   useIsParticipatingInGovernance,
@@ -16,6 +16,7 @@ import globalMessages from '../i18n/global-messages'
 import {Modal} from '../legacy/Modal'
 import {useWalletNavigation} from '../navigation'
 import {useSelectedWallet} from '../SelectedWallet'
+import {useStatusBar} from '../theme/hooks'
 import {isEmptyString} from '../utils/utils'
 import {getCardanoNetworkConfigById} from '../yoroi-wallets/cardano/networks'
 import {getCardanoBaseConfig} from '../yoroi-wallets/cardano/utils'
@@ -55,6 +56,8 @@ export const Dashboard = () => {
   const isParticipatingInGovernance = useIsParticipatingInGovernance(wallet)
   const walletNavigateTo = useWalletNavigation()
 
+  useStatusBar()
+
   const handleOnParticipatePress = () => {
     walletNavigateTo.navigateToGovernanceCentre({navigateToStakingOnSuccess: true})
   }
@@ -72,8 +75,6 @@ export const Dashboard = () => {
 
   return (
     <View style={styles.root}>
-      <StatusBar />
-
       <View style={styles.container}>
         {isOnline && error && <SyncErrorBanner showRefresh={!(isLoading || isSyncing)} />}
 

apps/wallet-mobile/src/Nfts/Nfts.tsx

@@ -6,10 +6,11 @@ import {defineMessages, useIntl} from 'react-intl'
 import {RefreshControl, ScrollView, StyleSheet, Text, View} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Icon, NftImageGallery, SkeletonGallery, Spacer, StatusBar} from '../components'
+import {Icon, NftImageGallery, SkeletonGallery, Spacer} from '../components'
 import {useMetrics} from '../metrics/metricsManager'
 import {useSearch, useSearchOnNavBar} from '../Search/SearchContext'
 import {useSelectedWallet} from '../SelectedWallet'
+import {useStatusBar} from '../theme/hooks'
 import {useNfts} from '../yoroi-wallets/hooks'
 import {filterNfts, useTrackNftGallerySearchActivated} from './filterNfts'
 import {useNavigateTo} from './navigation'
@@ -20,6 +21,7 @@ export const Nfts = () => {
   const strings = useStrings()
   const styles = useStyles()
   const {track} = useMetrics()
+  useStatusBar()
 
   // use case: search nfts
   useSearchOnNavBar({
@@ -137,8 +139,6 @@ const Wrapper = ({children}: {children: ReactNode}) => {
   const styles = useStyles()
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
-      <StatusBar />
-
       <View style={styles.container}>
         <Spacer height={16} />