React Native Navigation Status Bar under Navigation Bar

Question

I'm using react-native-navigation library on my project and i'm having some issues with my status bar. First one is that i'm unable to change my status bar background color on iOS, so i created a component for that as follow:

const S_StatusBar = ({ backgroundColor, ...props }) => (
  <View style={[styles.statusBar, { backgroundColor }]}>
    <StatusBar translucent backgroundColor={backgroundColor} {...props} />
  </View>
);

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 
StatusBar.currentHeight;

const styles = StyleSheet.create({
 statusBar: {
    height: STATUSBAR_HEIGHT,
  }
});

I import this component on all my screen as followed:

      <View>
         <S_StatusBar backgroundColor="#090b4b" barStyle="light-content" />
      </View>

Here is how i push my screen using the react-native-navigation library:

pushProductDetailScreen = () => {
   this.props.navigator.push({
     screen: 'cfl.ProductDetail'
  });
};

The screen is pushed correctly but now my problem is that my status bar is under my navigation bar such as followed:

I don't understand the issue and why it's happening!

Have you solved this issue ? – Rajitha Perera Mar 15 '18 at 06:30 — Rajitha Perera, Mar 15 '18 at 06:30

score 1 · Answer 1 · answered Feb 01 '18 at 11:18

You are creating a View encapsulating something

<View style={[styles.statusBar, { backgroundColor }]}>
...
</View>

statusBar: {
  height: STATUSBAR_HEIGHT,
}

So it does create a View with the specified height and backgroundColor

StatusBar is a component a bit different. It doesn't render anything but change the settings of your StatusBar.

You should be able to configure it from your View itself

<StatusBar
  backgroundColor="blue"
  barStyle="light-content"
/>

luky · Answer 2 · 2019-03-15T10:25:38.207

This styling works for me

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;

class App extends Component {
  render() {
    return (
      <View style={[styles.container]}>
         <View style={[styles.statusbar]}>
           <StatusBar barStyle="dark-content"/>
         </View>
         <WebView
           style={[styles.webview]}
           source={{ uri: "https://..." }}
        />    
      </View>
    );  
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  statusbar: {
    height: STATUSBAR_HEIGHT,
  },
  webview: {
    flex: 1,
  }
});

React Native Navigation Status Bar under Navigation Bar

2 Answers2