Search code examples
iosxcodereactjsreact-nativetestfairy

React Native iOS StatusBar invisible after build?

I have a React Native project I've written using Expo -- when I develop and publish on Expo, the Status Bar up top (the time, wifi etc) is fine, I've never had to be concerned about it -- it's always been there, so I've never had to read-in a separate StatusBar component or anything like that.

enter image description here

But when I 'build' the app to get the IPA file and then deploy on TestFairy, the App's statusbar is completely invisible (not sure if the font is white or it's an overlay or what).

enter image description here

Any ideas? Thanks!

Solution

  • As mentioned in the Expo docs

    Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design.

    Therefore using the react-native's StatusBar you can configure it as follows

    <ParentWrapper style={{flex: 1}}>
  <View style={{ height, backgroundColor }}>
        <StatusBar { ...props } />
    </View>
  // ... Your navigation or the child components
</ParentWrapper>

    and the height is Platform.OS === 'ios' ? 20 : StatusBar.currentHeight