How to move between tab screens in tab navigator in react navigation 5?

user_8321025 0
Viewed 2329
<NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name="Home" component={HomeStack} />
        <Tabs.Screen name="Discover" component={Discover} />
      </Tabs.Navigator>
    </NavigationContainer>

I have a search component in Home Stack... And I have a search button in discover which takes me to search component in Home stack but when I use navigator.back() it took me to the home component instead of discover the component The Stack navigator in HomeStack is like this:

<Stack.Navigator initialRouteName="HomeScreen">
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="SearchScreen"
        component={SearchScreen} // this is the search component
      />
    </Stack.Navigator>

I want the back button to take me to the last screen instead of the root screen of that stack

react-navigation-v5 react-navigation react-native reactjs javascript
1 Answers

If you do the following it will work very well and will be easier to organize.

First, you will create the StackNavigator inside your main js file, in this example will be App.js. You will create one folder to store your screens too (in this case I will call src)

App.js will looks like this:

import HomeScreen from '../src/screens/HomeScreen .js // importing screens
import SearchScreen from '../src/screens/SearchScreen.js
.
.
.

const navigator = createStackNavigator(
    {
        Screen1Ref: HomeScreen,
        Screen2Ref: SearchScreen ,
        .
        .
        .
    },
    {
        initialRouteName: 'HomeScreen ',
        defaultNavigationOptions: {
            title: 'name',
        },
    }
);

export default createAppContainer(navigator);

Second, you will create your screens and export default each screen, and import it in your App.js file where the screens will be listed (imported and receive one key) and you will create your navigators.

Inside your screens, you will use navigation.navigate('key') to navigate to any screen. See the example:

const ScreeExample = ({navigation}) => {
     return (
          <Text>Testing</Test>
          navigation.navigate('Screen1Ref')
     )
}
export default ScreenExample

It is an easier way that I can recommend to you and will work also the button to return to the previous screen.

user_124859560
Related