javascript - How to override header title in react navigation 5

Question

In my react native app i have stack navigator and tab navigator like:

   const diagnoseNavigation = ({ navigation, language }) => {
   return (
    <Stack.Navigator
        screenOptions={{
            headerStyle: {
                backgroundColor: "#0089d8",
                shadowOpacity: 0
            },
            headerTitleStyle: {
                fontWeight: "bold",
                color: "white",
                textAlign: "center"
            },
            headerLeft: () => (
                .......
            )
        }}
      >
        <Stack.Screen
            name="Diagnose"
            component={tabNav}
            options={({ route, navigation }) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? "Home";

                switch (routeName) {
                    case "Screen1": {
                        return {
                            headerTitle:"Screen1",
                            headerRight: () => (
                                .......
                            )
                        };
                    }

                    case "Screen2": {
                        return {
                            headerTitle: "Screen2" //want to override this one
                        };
                    }
                    default: {
                        return {
                            headerTitle: "Home"
                        };
                    }
                }
            }}
        />
    </Stack.Navigator>
);
};

Tab navigation:

const Tab = createBottomTabNavigator();
const tabNav = () => {
return (
    <Tab.Navigator tabBarOptions={{ showIcon: true }}>
        <Tab.Screen
            name="Screen1"
            component={Screen1Screen}
        />
        <Tab.Screen
            name="Screen2"
            component={Screen2Screen}
        />
        <Tab.Screen
            name="Screen3"
            component={recommendedNavigation}
        />
    </Tab.Navigator>
);
};

Screen2

 const Screen2Screen = ({ route, language }) => {

 return (
    <Stack.Navigator>
        <Stack.Screen options={{ headerShown: false }} name="A" component={AScreen} />
        <Stack.Screen
            name="B"
            component={BScreen}
            options={() => {
                return {
                    headerTitle: "ABC" //with this one
                };
            }}
        />
    </Stack.Navigator>
);
};

In short i have stack navigatior, in that i have tab navigator. there are 3 tabs,what i want is in my tab 2(Screen2) there is a button when i click that button it should navigate to another page within the same tab.Then the title should be the "ABC" but it still shows "Screen2" under that ABC. ie, not overriding the header title?

 Something like this:

question from:https://stackoverflow.com/questions/65949604/how-to-override-header-title-in-react-navigation-5

Answer 1

You have to pass showLabel props to hide the header in your tababrOptions.

   <Tab.Navigator tabBarOptions={{ showIcon: true ,        showLabel: false,
}}>