3

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
  • 51
  • 5

2 Answers2

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')}
KnowIdea
  • 51
  • 5
1

Add this below your render method!

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

}

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

Hopefully this helps

JasonBeedle
  • 338
  • 2
  • 14
  • 1
    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) – KnowIdea Jan 23 '21 at 22:02