Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Navigation 5 - How to navigate from headerRight?

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

like image 534
abet Avatar asked Jun 01 '20 06:06

abet


People also ask

How do you handle the back button in react navigation?

By default React Navigation will handle the Android back button for you, however we'll need to override the defaults. If you're at the top of the stack and press the android back button the application will close. If you've navigated within the stack anywhere then the screen will pop.


2 Answers

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
      />
    )
  })}
like image 189
Brian H. Avatar answered Oct 17 '22 02:10

Brian H.


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>
              ),
            })}
          />
like image 24
Marek Bartczak Avatar answered Oct 17 '22 00:10

Marek Bartczak