Using header buttons to navigate to another screen using react-navigaton

Question

I have created a stack navigator with a header button which will be used to navigate to another screen, however I get this error when I try to goto another screen

TypeError: undefined is not an object (evaluating 'navigation.navigate')

And when I console.log(navigation) its undefined. But however when I create a button within a component & navigate to another screen it works. Its only the header buttons that are give me issues.

import {createStackNavigator} from '@react-navigation/stack';
import TabNav from './TabNavBar';
import TestingScreen from '../components/TestingScreen';

const Stack = createStackNavigator();

const NavTest = ({navigation}) => {
  navigation.navigate('testingScreen');
};

const StackNavigatorContainer = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name={'tabNavigator'}
        component={TabNav}
        options={{
          headerLeft: () => (
            <Button title={'go to testing screen'} onPress={NavTest} />
          ),
        }}
      />
      <Stack.Screen name={'testingScreen'} component={PostInvoice} />
    </Stack.Navigator>
  );
};

export default StackNavigatorContainer;

I've also tried...

      <Stack.Screen
        name={'tabNavigator'}
        component={TabNav}
        options={{
          headerLeft: ({navigation}) => (
            <Button title={'go to testing screen'} onPress={() => navigation.navigate('testingScreen)} />
          ),
        }}
      />

And

      <Stack.Screen
        name={'tabNavigator'}
        component={TabNav}
        options={{
          headerLeft: () => (
            <Button title={'go to testing screen'} onPress={({navigation}) => navigation.navigate('testingScreen)} />
          ),
        }}
      />
``

Angel Jerry · Accepted Answer · 2020-07-06 18:32:35Z

2

To improve your understanding about my answer, I want to share my code that working well.

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const AppStack = createStackNavigator();
<NavigationContainer>
    <AppStack.Navigator>
       <AppStack.Screen name="Home" component={Home}
              options={({ navigation }) => {
                            return {
                                headerTitleAlign: 'center',
                                headerMode: 'screen',
                                headerRight: () => (
                                    <Button
                                        onPress={() => 
                                          navigation.navigate('Options')}
                                        title="Crete Group"
                                        color="#00f"
                                    />
                                ),
                            }
                        }}
                    />
               <AppStack.Screen name="Options" component{Groupoptions} />
              </AppStack.Navigator>
            </NavigationContainer>

I hope this code help you surely.

answered Jul 6, 2020 at 18:32

Angel Jerry

983 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tony Ngomana Over a year ago

Thank you it worked. Was this method mention in there documentation?

Angel Jerry Oct 15 at 15:20

Actually, I have rich experience in react-native. So I found from my last code. Sorry but, I can not remember where I found from at last time.

Angel Jerry Over a year ago

Actually, I have rich experience in react-native. So I found from my last code. Sorry but, I can not remember where I found from at last time.

Collectives™ on Stack Overflow

Using header buttons to navigate to another screen using react-navigaton

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related