CODEWITHSUNDEEP
react-nativereact-navigation
Kshitij Bajracharya
Kshitij Bajracharya

Reputation: 851

How to navigate to a specific tab of another screen in react native?

I have the following setup for navigation in react-native:

const HomeTabs = createTopTabNavigator();

function HomeScreen() {
  return (
    <HomeTabs.Navigator>
      <HomeTabs.Screen name="Feed" component={FeedTab} />
      <HomeTabs.Screen name="Groups" component={GroupsTab} />
    </HomeTabs.Navigator>
  );
}

const SettingsTabs = createTopTabNavigator();

function SettingsScreen() {
  return (
    <SettingsTabs.Navigator>
      <SettingsTabs.Screen name="Profile" component={ProfileTab} />
      <SettingsTabs.Screen name="Change Password" component={ChangePasswordTab} />
    </SettingsTabs.Navigator>
  );
}

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );

}

In the Feed Tab there is a button, using which I need to navigate to the Change Password Tab. How can I achieve this since it is in a different screen?

I can easily navigate to the Groups Tab from the Home Tab using a button like the following:

<TouchableOpacity onPress={() => navigation.navigate('Groups')}>
    <Text>Go to groups</Text>
</TouchableOpacity>

This is because both Home Tab and Groups Tab are in the same screen. But when I have something like the following:

<TouchableOpacity onPress={() => navigation.navigate('Change Password')}>
    <Text>Change Password</Text>
</TouchableOpacity>

I get an error like the following:

The action 'NAVIGATE' with payload {"name":"Change Password"} was not handled by any navigator.

Do you have a screen named 'Change Password'?

How do I fix this?

Upvotes: 1

Views: 3682

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You will have to use the following approach, as the screen 'Change Password' is nested inside the 'Settings' navigator

navigation.navigate('Settings', { screen: 'Change Password' });

You can check the documentation below https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

Upvotes: 5

Related Questions