Using createBottomTabNavigator with createStackNavigator in React Native

Question

I am new to react native, I am trying to create a tab bar and also use createStackNavigator to allow me to link screens together. I have been able to get this to work with the following code.

 const TabNavigator = createBottomTabNavigator({ Home: { screen: HomeScreen }, Events: { screen: EventScreen }, About: { screen: AboutScreen } }, { tabBarOptions: { showIcon: true, activeTintColor: '#D4AF37', inactiveTintColor: 'gray', style: { backgroundColor: 'white', }, labelStyle: { fontSize: 20, } } } ); const MyStack = createStackNavigator({ Tabs: { screen: TabNavigator }, Home: { screen: HomeScreen }, Sermons: { screen: SecondActivity }, Map: { screen: MapScreen } }, { initialRouteName: 'Tabs', } ); export default createAppContainer(MyStack);

The only problem is that when I run my app each page says tabs in the header as shown below. Is there any way to fix this?

Answer 1

Try to set navigationOptions :

 Home: {
   screen: HomeScreen,
   navigationOptions: ({ navigation, screenProps }) => ({
     title: `My home page`
   })
 }

Answer 2

Yes you can pass navigationOptions to your different stacks!

    const ENTRYSTACK= createStackNavigator(
  {
    ENTRY: {
      screen: ENTRYSCREEN,
      navigationOptions: {
        headerTitle: "Your Header Title",
        headerTitleStyle:{
          color: "white",
          alignSelf: "center"         // some styling if u want 
        },
        headerStyle:{
          backgroundColor: "#a51717"
        }
      }
    }, some other screens/stacks ... 
  }
)