CODEWITHSUNDEEP
react-nativereact-navigation-drawerreact-navigation-v5
Darkleon
Darkleon

Reputation: 13

Reset nested StackNavigator in DrawerNavigator v.5

In version 4 I reseted StackNavigation using DrawerItems onItemPress inside contentComponent:

const AppDrawerNavigator = createDrawerNavigator(
  {
    Stack1: {
       screen: Stack1,
       navigationOptions: { // options}
   },
   Stack2: {
      screen: Stack2,
      navigationOptions: { // options}
   },
  {
    initialRouteName: 'Stack1',
    contentOptions: {
      activeTintColor: '#346bc7',
    },
    contentComponent: props => {
      return (
        <ScrollView>
          <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }} >
            <DrawerItems {...props} onItemPress={router => {
              const navigateAction = NavigationActions.navigate({
                routeName: router.route.routeName,
                params: {},
                action: NavigationActions.navigate({ routeName: router.route.routes[0].routeName }),
              });
              props.navigation.dispatch(navigateAction);
            }}
            />
          </SafeAreaView>
        </ScrollView>
      )
    }
  },
);

React Navigation 5 has a completely new API, so my old reset code does'nt work. How can I do it in DrawerNavigator v.5?

Upvotes: 1

Views: 3704

Answers (2)

Morta
Morta

Reputation: 399

This worked for me, based on documentation :

import { CommonActions } from "@react-navigation/native";

 props.navigation.dispatch({
      ...CommonActions.reset({
        index: 0,
        routes: [{ name: "AuthStackNavigator" }]
      })
    });

And if you want to Reset to specific Screen in that Stacknavigator you can do like this :

  props.navigation.dispatch({
      ...CommonActions.reset({
        index: 0,
        routes: [
          {
            name: "AuthStackNavigator",
            state: {
              routes: [
                {
                  name: "SignUpScreen",
                  params: {         //<--- send with param optional
                    paramTest: "param test"
                  }
                }
              ]
            }
          }
        ]
      })
    });

I hope this help someone.

Upvotes: 8

Kadir Yaka
Kadir Yaka

Reputation: 46

you use drawerContent instead of contentComponent in react-navigation-v5 simply code;

<Drawer.Navigator drawerContent={props => <DrawerCustomComponent {...props} />}>
     {{ screen objects }}
</Drawer.Navigator>

sample project; github

Upvotes: 0

Related Questions