Unable to get tab bar from react-navigation working - react-native

Question

I want to show tab bar in my react-native app using react-navigation library. I've tried code from an example provided in the documentation. However, when I run the code on iOS simulator the screen appears to be blank, tab bar doesn't load.
Here's my code so far,
TabNavigator.js
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
initialRouteName: "Home"
}
);
export default createAppContainer(TabNavigator);
App.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import TabNavigator from './components/TabNavigator';
const App = () => {
return (
<View>
<TabNavigator />
</View>
);
};
export default App;

Answer 1

Looking at the App.js code, you forgot to put flex:1 to the view, it's one of the common mistakes that react-navigation tells about in his documentation.
const App = () => {
return (
<View style={ { flex:1} }>
<TabNavigator />
</View>
);
};
Source: https://reactnavigation.org/docs/en/common-mistakes.html#wrapping-appcontainer-in-a-view-without-flex