access `headerRight` inside a screen that is hosted by stack navigator

user_959734 0
Viewed 565

I have created a stack navigator:

import {createStackNavigator} from '@react-navigation/stack';

const TheStack = createStackNavigator();

Then, This is my navigator, it claimed component={LandingScreen}:

<TheStack.Navigator ...>
  <TheStack.Screen
        name="LandingScreen"
        component={LandingScreen}
        options={{
          title: '',
          headerLeft: null,
          headerRight: () => (
            <MyHeaderRightComponent />
          ),
        }}
      />

<TheStack.Navigator>

As you can see above in options of the screen, there is headerRight, I have declared using MyHeaderRightComponent as headerRight so that it is shown on the right side of the header on screen.

Here is my LandingScreen.js :

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';

const LandingScreen = ({navigation}) => {
   // How can I access the `headerRight` component I have set above from here? 
   ...
}

My question is how can I access the headerRight inside my LandingScreen.js? I know I can update or reset the headerRight by:

navigation.setOptions({headerRight:() => <NewHeaderRightComponent/>})

But now what I need is to access the previous already set component, not setting a new one. How to do that?

react-navigation react-native-navigation react-native
1 Answers

Edits to the answer as per the request received in comments. The answer is the same. This is just further demonstration on how to use it.

// The screen component where you want to pass the state.

const Screen = (props) => {
  const [color, setColor] = useState("#CCCCCC");

  const { navigation } = props //This is important or else UseEffect will be called each time any of the props change

  useEffect(() => {
    navigation.setParams({ color: color }); // Where its being passed.
  }, [color, navigation]);

  return (
   <>
    <Button onPress={() => setColor("#800000")} /> // Change the color state to Maroon
    <Button onPress={() => setColor("#FED700")} /> // Change the color state to Gold
   </>
  )
}

Your Header Component:

const MyHeaderComponent = (props) {
  return(
    <View style={{ backgroundColor: props.bgColor }} />
  )
}

Then you can retrieve this bit in headerRight. Like this:

headerRight:() => <MyHeaderComponent bgColor={route.params.color} />

Note: This method is valid for React Navigation v5. Version 4 has a getParams() function to retrieve the params, but it was dropped in Version 5.

Original Answer

You can create a useState hook in the screen and pass its value into your header component. So, when the header component updates the state, it can be accessed from within the screen where you have defined the state.

you can use setParams() function to set the params you want to use in the header component. Then, use route.params.nameofyourprop to get them in the headerComponent, where you can consume it.

This is to pass params from outside the header to inside of it.

headerRight:() => <MyHeaderRightComponent propname={route.params.propvalue} />

This to to set the Params from outside your header which you can access inside the headerRight component.

const [values, setValue] = useState()

navigation.setParams({propname: value})

This way you can pass state between the header and the screen.

You can also pass the setValue function of the useState in this manner, but it will throw a warning because functions are objects in Javascript and thus its not possible to index them... or something on those lines.

user_140735090
Related