I'm using react-navigation and want to add a button to the right on my header that will navigate to a different screen. But when setting up the navigationOptions, I'm wondering how I can get access to the navigate function in the callback that is invoked when the button is pressed:

const RootNavigationStack = StackNavigator({
  PokemonList: {
    screen: PokemonListWrapper,
    navigationOptions: {
      title: ({state}) => `Pokedex`,
      header: ({ state, setParams }) => {
        return {
          visible: true,
          right: (
            <Button
              title={'Add'}
              onPress={() => // navigate to new screen here
            />
          ),
        }
      }
    },
  },
, {
  headerMode: 'screen'
})

Any ideas how this can be achieved? I was thinking of maybe using withNavigation, but am still not quite clear on how that would work.

I'm using react-navigation and want to add a button to the right on my header that will navigate to a different screen. But when setting up the navigationOptions, I'm wondering how I can get access to the navigate function in the callback that is invoked when the button is pressed:

const RootNavigationStack = StackNavigator({
  PokemonList: {
    screen: PokemonListWrapper,
    navigationOptions: {
      title: ({state}) => `Pokedex`,
      header: ({ state, setParams }) => {
        return {
          visible: true,
          right: (
            <Button
              title={'Add'}
              onPress={() => // navigate to new screen here
            />
          ),
        }
      }
    },
  },
, {
  headerMode: 'screen'
})

Any ideas how this can be achieved? I was thinking of maybe using withNavigation, but am still not quite clear on how that would work.

• javascript
• reactjs
• react-navigation

4 Answers 4

The other answer works in older versions of react Navigation.

For new versions, try this:

static navigationOptions = ({ navigation }) => ({
        headerRight: (
            <Button 
                title='Setting' 
                onPress={ () => navigation.navigate('RouteName') }                
                backgroundColor= "rgba(0,0,0,0)"
                color="rgba(0,122,255,1)"
            />
        )});

I solved the same problem using this(inside Screen/Component Class )

static navigationOptions = ({navigation}) => {
  return {
    title: 'Next',
    headerRight: <Button
                     title="Next"

                     onPress={ () => navigation.navigate('RegPasswordScreen')} />

  };
};

Try this.

    header: ({ navigate }) => ({
       right: (
          <Button onPress={() => navigate('screen2')}  />
       )
    }),

In latest version, you can do this by hooks.

import { useNavigation } from '@react-navigation/native';

const CustomHeaderComponent = (props) => {
  const navigation = useNavigation();
  return <Button onPress={() => navigation.navigate('screen2')} />;
}