Navigatorbar cover content - react-native

Question

I'm facing a problem that the navigatorbar covers all the contents
index.android.js
export default class RNTodosApp extends Component {
render() {
const routes = [
{title: 'Todos', index: 0}
];
return (
<Provider store={store}>
<View>
<StatusBar
backgroundColor='#0277BD'
barStyle='light-content'
/>
<Navigator
initialRoute={routes[0]}
initialRouteStack={routes}
navigationBar={
<Navigator.NavigationBar
routeMapper={{
LeftButton: (route, navigator, index, navState) =>
{ return; },
RightButton: (route, navigator, index, navState) =>
{ return; },
Title: (route, navigator, index, navState) => {
return (<Text style={styles.title}>{route.title}</Text>);
},
}}
style={styles.navigatorBar}
navigationStyles={Navigator.NavigationBar.StylesIOS}
/>
}
renderScene={(route, navigator) => {
if(route.index === 0) {
return (
<App />
)
}
}} />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
navigatorBar: {
backgroundColor: '#01579B',
},
title: {
color: '#FFFFFF',
fontSize: 20,
}
});
and the App.js file
class App extends Component {
render() {
console.log('Get called!');
return (
<View style={styles.container}>
<Text>Hello World!</Text>
<Text>Hello World!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
}
})
Now the problem is I can't make the Hello World text to be displayed on the screen
Thank you.
I tried to add and change the alignItems and the justifyContent props but it's still doesn't work

Answer 1

I forgot the flex 1 in my code, solved!