How to pass a value from headerRight component from navigator to nested navigator's screen in react native?

Question

I have my navigators arranged like this.

1. Bottom Navigator 2. Stack Navigator 3. Material Top Tabs Navigator 4. Home Screen

I have created headerRight button in StackNavigator's ScreenComponent like this.

export default HomeDashboardNavigation = ({route, navigation}) => {
      return (
        <DashboardStack.Navigator>

          <DashboardStack.Screen name="TopTabNavigator" component={TopTabNavigator}    
          options={{
          headerShown: true, 
          headerShadowVisible: false, 
          headerStyle:{backgroundColor:'#FEF8F0'},  
          headerTitle: (props) => <LogoTitle {...props} />, 
          headerTitleAlign: 'center',

            headerRight: () => (
              <TouchableOpacity onPress={() => {
                // Need to pass a boolean value to HomeScreen
              }}
              >
              <HintComponent />
             </TouchableOpacity>
              ),



          }}
           />

          
        </DashboardStack.Navigator>
      )
}

My TopTabNavigator looks like this:

  const TopTabNavigator = ({route, navigation}) => {
      return (
        <Tab.Navigator tabBar={props => <TabBar {...props} />}  >
            <Tab.Screen name="HomeScreen" component={HomeScreen} />
            <Tab.Screen name="Second" component={SecondScreen} />
            <Tab.Screen name="Third" component={ThirdScreen} />
            <Tab.Screen name="Fourth" component={FourthScreen} />
          </Tab.Navigator>
      )
}

My HomeScreen is:

const HomeScreen = (props) => {

const isHeaderRightClicked = false;    //Need to get the value here

return (
<ScrollView>

</ScrollView>
);
}

I am using react native navigation 6. I tried using setParams and setting route.params and tried to get is in HomeScreen using useEffect on props.navigation but it never gets executed.

I don't know how to pass value from onPress event to the screen. HomeScreen is embedded in TopTabNavigator which is a Screen component of StackNavigator whose header button click sets the value.

Could you please suggest a good way to do this.

Answer 1

Try something like my example below. Here a useState boolean hook [isClicked, setIsClicked] is defined, where the onPress-function changes this boolean on every press. The state isClicked in then passed through the TopTabNavigator to the HomeScreen where it can be used.

HomeDashboardNavigation file:

export default HomeDashboardNavigation = ({ route, navigation }) => {
  const [isClicked, setIsClicked] = useState(false);

  return (
    <DashboardStack.Navigator>
      <DashboardStack.Screen
        name="TopTabNavigator"
        options={{
          headerShown: true,
          headerShadowVisible: false,
          headerStyle: { backgroundColor: "#FEF8F0" },
          headerTitle: (props) => <LogoTitle {...props} />,
          headerTitleAlign: "center",

          headerRight: () => (
            <TouchableOpacity
              onPress={() => {
                setIsClicked((state) => !state);
              }}
            >
              <HintComponent />
            </TouchableOpacity>
          ),
        }}
      >
        {(props) => <TopTabNavigator isClicked={isClicked} {...props} />}
      </DashboardStack.Screen>
    </DashboardStack.Navigator>
  );
};

TopTabNavigator file

const TopTabNavigator = ({ isClicked, route, navigation }) => {
  return (
    <Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <Tab.Screen name="HomeScreen">
        {(props) => <HomeScreen isClicked={isClicked} {...props} />}
      </Tab.Screen>
      <Tab.Screen name="Second" component={SecondScreen} />
      <Tab.Screen name="Third" component={ThirdScreen} />
      <Tab.Screen name="Fourth" component={FourthScreen} />
    </Tab.Navigator>
  );
};

HomeScreen file

export const HomeScreen = (props) => {
  const isHeaderRightClicked = props.isClicked;

  return <ScrollView></ScrollView>;
};