Redirecting to a Stack navigator page from bottomTabNavigator

Question

I have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator

Here is the code for my project: Routes.js i.e Stack Navigator

<UserContext.Provider value={{userDetails, setUserDetails}}>
  <Stack.Navigator
    headerMode="screen"
    screenOptions={{
      header: ({scene, previous, navigation}) => {
        const {options} = scene.descriptor;
        const title =
          options.headerTitle !== undefined
            ? options.headerTitle
            : options.title !== undefined
            ? options.title
            : scene.route.name;

        return <Header title={title} />;
      },
    }}>
    {userDetails ? (
      <>
        <Stack.Screen
          name="home"
          options={{title: 'Home'}}
          component={BottomTabNavigator}
        />
        <Stack.Screen
          name="library"
          component={Library}
          options={() => ({
            headerTitle: 'My Library',
          })}
        />
        <Stack.Screen
          name="bookDetails"
          component={BookDetails}
          options={{title: 'Book Details'}}
        />
        <Stack.Screen
          name="reviews"
          component={AllReviews}
          options={{headerTitle: 'View all Reviews'}}
        />
      </>
    ) : (
      <Stack.Screen name="Login" component={Login} />
    )}
  </Stack.Navigator>
</UserContext.Provider>

bottomTabNavigator.js:

<Tab.Navigator
      tabBarOptions={{activeTintColor: 'green', style: {height: tabBarHeight}}}>
      <Tab.Screen
        name={'Home'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="home" size={27} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name={'Search'}
        component={Home}
        options={{
          tabBarIcon: ({color}) => (
            <AntDesign name="search1" size={25} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name={'My Library'}
        component={Library}
        options={{
          tabBarIcon: ({color}) => {
            return (
              <View
                style={{
                  position: 'absolute',
                  bottom: 7,
                  height: 65,
                  width: 65,
                  borderRadius: 65,
                  backgroundColor: 'green',
                  justifyContent: 'center',
                  alignItems: 'center',
                  shadowColor: '#000',
                  shadowOffset: {
                    width: 0,
                    height: 5,
                  },
                  shadowOpacity: 0.37,
                  shadowRadius: 7.49,

              elevation: 12,
            }}>
            <AntDesign name="book" size={40} color={'white'} />
          </View>
        );
      },
    }}
  />
  <Tab.Screen
    name={'Browse'}
    component={Home}
    options={{
      tabBarIcon: ({color}) => (
        <AntDesign name="earth" size={25} color={color} />
      ),
    }}
  />
  <Tab.Screen
    name={'More'}
    component={More}
    options={{
      tabBarIcon: ({color}) => (
        <Feather name="more-horizontal" size={30} color={color} />
      ),
    }}
  />
</Tab.Navigator>

What I want to do is when I tap on My Library in the tabNavigator the headerTitle still says home, I want it to say "" Here is how I tried to achieve this:

useLayoutEffect(() => {
    navigation.setOptions({headerTitle: 'My Library'});
  }, [navigation, route]);

Any help is appreciated

Thanks

Answer 1

I tried doing it automatically but I couldn't figure it out, but what I did was use my custom header component on each screen and hardcode the title of the screen, so the process may not be as efficient as letting react navigation do all the work, but it works fine for me