React Navigation 5 - How to navigate from headerRight?

Question

i still trying to understand this react navigation 5.0. Fyi i'm using expo, and right now no problem when navigate from one page to other, problem is when i put navigation for the headerRight. i put in headerRight in Stack.Navigator because i want this button to be accessible from other screen.

So basically the problem is, i want to put logout button in headerRight, but when i try to put navigation.navigate it sait undefined is not an object (evaluating '_this.props')

Then i try to call a function (handleClick), problem is undefined is not an object too.

May i know what's wrong with my code?

Below is my full code :

import * as React from 'react';
import { Button, View, Text, TextInput, Image, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from './src/pages/auth/Login';
import HomeScreen from './src/pages/auth/HomeScreen';

const Stack = createStackNavigator();


export default function App() {

  // handleClick = () => {
  //   this.props.navigation.navigate('Login');
  // }

  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal" initialRouteName="Login" screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerRight: () => (
          <Button
            // only alert is ok, the other is error.
            // onPress={() => alert('Success Logout!')}
            onPress={this.handleClick}
            // onPress={this.props.navigation.navigate('Home')}
            title="Logout"
            color="#fff"
          />
        ),

        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>

        <Stack.Screen name="Login"
          name="Login"
          component={LoginScreen}
          options={{
            title: 'Simple Scorecard',
          }} />
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Home Menu',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Thanks before

Nebulosity

Answer 1

You should try this.

You receive the reference to the router (navigation) by converting the property screenOptions to a function.

screenOptions={({route, navigation}) => ({ // get reference to navigation
   headerRight: () => (
      <Button
        onPress={() => navigation.navigate('Home'); // call .navigate on navigation
      />
    )
  })}

Senhauser

thank you very much, just know that i can put navigation inside the screenOptions. it works. thanks again – Nebulosity

FYI: screenOptions seems to only be available for the Stack.Navigator component; reactnavigation.org/docs/screen-options – Zebulun

In their newer versions, screenOptions has been renamed to options but the point still stands, turn it into a function and you'll get access to it – Satanic

Answer 2

My answer for that. you have to pass "navigation", and convert "options" to the function

<Stack.Screen
      // some code ...
            options={({ navigation }) => ({
              headerRight: () => (
                <TouchableOpacity onPress={() => navigation.navigate("pageYouWantNavigateTo")} > 

     // some component ...
              
                </TouchableOpacity>
              ),
            })}
          />

Microelectronics