React Native Expo StackNavigator overlaps notification bar

Question

I am trying to implement a navigation bar for my React Native Expo application. Here is the problem:

"dependencies": { "expo": "^18.0.3", "react": "16.0.0-alpha.12", "react-native": "^0.45.1", "react-navigation": "^1.0.0-beta.11" } 

I do not know where and how I can customize the styles for this component so that it does not overlap with the notification panel. I tried setting marginTop: StatusBar.currentHeight for my root view, but that didn't work. He applied margin in the view, but not in the navigation bar.

My application:

 import {StackNavigator} from 'react-navigation'; import Home from './app/screens/Home'; export default App = StackNavigator({ Home: { screen: Home } }) 

home

 export default class Home extends Component { constructor() { super(); // <...> } static navigationOptions = { title: 'Welcome' }; // <...> } 

Answer 1

If you wrap the entire application in the View with the top edge, it will work.

Example: https://snack.expo.io/r1gb9TGH-

In the future, we are going to build this in an interactive navigation so that this happens automatically.

 import React, {Component} from 'react'; import {StatusBar, View} from 'react-native' import {StackNavigator} from 'react-navigation'; import Home from './app/screens/Home'; const RootNavigator = StackNavigator({ Home: { screen: Home } }) export default class App extends Component { render() { return ( <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}> <RootNavigator /> </View> ) } }