How do I add a navigation button to a React Navigation Stack header with nested Bottom Tab Navigator?

Question

I am trying to build a mobile app in react-native and I'm having some problems setting up React Navigation.

What I want to achieve is a Bottom Tab Navigator that Navigates to the 'Home' screen and the 'Profile' Screen. From the 'Home' screen, there should be a button to navigate to the 'Settings' screen in the Header.

I have got to the point where I have a Bottom Tab Navigator that can successfully navigate between the 'Home' and 'Profile' screens, as well as a button on the header for the Settings screen using the Stack navigation header. However, I am having trouble navigating to the 'Settings' screen with this button.

My code for the Stack navigator is:

const MainStackNavigator = () => {
return (
  <Stack.Navigator screenOptions={screenOptionStyle}>
    <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options = { ({navigation}) => ({
            title: "Home",
            headerStyle: {
                backgroundColor: '#ff6600',
            },
            headerRight:  () => (
              <Button
                onPress={() => navigation.navigate(SettingScreen)}
                title="Settings"
                color="#fff"
              />
            )
        })}
    />
    <Stack.Screen name="Settings" component={SettingScreen} />
  </Stack.Navigator>
);

}

When I click on the Settings button, I get the error:

"The action 'NAVIGATE' with payload undefined was not handled by any navigator.

Do you have a screen named 'SettingScreen'?"

Upon looking for a solution to this error I found this article: Nesting Navigators

It recommends keeping nested navigators to a minimal. Is my method even the right way about going for this UI design? Is there a way to achieve this with only using one navigator?

KnowIdea · Accepted Answer · 2021-01-23 21:59:18Z

2

After some time trying to solve this I found the problem was quite silly of me. navigation.navigate takes the name of the screen to navigate to, but I was giving it the component.

To fix the problem I changed

onPress={() => navigation.navigate(SettingScreen)}

to

onPress={() => navigation.navigate('Settings')}

answered Jan 23, 2021 at 21:59

KnowIdea

515 bronze badges

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

Comments

Jason Byron Beedle · Accepted Answer · 2021-01-23 10:01:44Z

1

Add this below your render method!

render () {
const { navigate } = this.props.navigation;

}

And then in the onPress onPress={() => navigate(SettingScreen)}

Hopefully this helps

edited Jan 23, 2021 at 10:01

answered Jan 23, 2021 at 9:54

Jason Byron Beedle

4217 silver badges24 bronze badges

1 Comment

KnowIdea Over a year ago

This solution was giving me the same error as I initially had. However, your answer did help me discover the difference between functional components and class components, so thanks for that! (I am very new to react-native and JavaScript)

Collectives™ on Stack Overflow

How do I add a navigation button to a React Navigation Stack header with nested Bottom Tab Navigator?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related