How can I change the title for each screen inside TabNavigator? - React Navigation

Question

My stack navigator

<NavigationContainer>
    <Stack.Navigator>
       <Stack.Screen name="PageA" component={PageA} options={{title:'Page=A'}} />
       <Stack.Screen name="PageB" component={PageB} options={{title:'Page=B'}} />
       <Stack.Screen name="Menu" component={MenuTabNavigator} options={{title:'Menu'}} />
    </Stack.Navigator>
</NavigationContainer>

and my tab navigator

const MenuTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="PageA" component={PageA} />
      <Tab.Screen name="PageB" component={PageB} />
      <Tab.Screen name="Menu" component={Menu} />
    </Tab.Navigator>
);};

I'm using Tab Navigator with Stack Navigator.

ScreenA, Screen B and Menu screen in my Tabs.

I pass MenuTabNavigator to StackNavigator's Menu Component as you can see.

Problem:

When I use tabs, header title stays 'Menu'.

For example when I touch to PageB on tab, i expect header title should be 'PageB' but it stays 'Menu'.

How can I change header title for screens when i use bottom tabs?

Answer 1

The approach you are using is wrong. if you go this way you have to create three StackNavigators so that you can get three different headers. and then wrap them in a tab navigator. but this is the wrong way to use it.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen({ navigation }) {
    navigation.setOptions({ title: 'Home' })
    return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
     );
 }

 function SettingsScreen({ navigation }) {
   navigation.setOptions({ title: 'Setting' })

 return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Settings!</Text>
    </View>
  );
}

function Menu({ navigation }) {
  navigation.setOptions({ title: 'Menu' })
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Menu</Text>
    </View>
  );
}


const StackHome = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
};
const StackSetting = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Setting" component={SettingsScreen} />
    </Stack.Navigator>
  );
};
const StackMenu = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Menu" component={Menu} />
    </Stack.Navigator>
 );
};
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function App() {

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="PageA" component={StackHome} options={{ title: "Home" }} />
        <Tab.Screen name="PageB" component={StackSetting} options={{ title: "Settings" 
        }} 
   />
        <Tab.Screen name="Menu" component={StackMenu} options={{ title: "Menu" }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;