CODEWITHSUNDEEP
react-native
tclarkMEOW
tclarkMEOW

Reputation: 141

React Native Drawer and Tab Navigator

Currently I have:

-Drawer 
--Home (Tab Nav)
   ---ScreenA
   ---ScreenB
   ---ScreenC
--ScreenY
--ScreenZ

When I am on ScreenB or ScreenC, and go to one of the other drawer options say ScreenY, then tap the "Home" Drawer option, it takes me back to ScreenC or wherever I left off. Is there a way to make tapping Home take me to ScreenA every time? Hope that makes sense.

Drawer:

<Drawer.Navigator
    drawerStyle={{width: "75%"}}
    drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={TabNavigator} />
      <Drawer.Screen name="Help" component={ScreenY} />
      <Drawer.Screen name="Terms" component={ScreenZ} />
</Drawer.Navigator>

Tab:

<Tab.Navigator
        tabBarOptions={{
          activeTintColor: colors.blue,
          inactiveTintColor: colors.black,
          style: {},
          tabStyle: {
            
            backgroundColor: "#e0d5f3",
            borderTopWidth: 3,
            borderBottomWidth: 3,
            borderRightColor: "gray",
          },
          labelStyle: {  
            fontWeight: "bold",
          },
          scrollEnabled: false,
        }}
      >
        <Tab.Screen name="Deals" component={ScreenA} />
        <Tab.Screen name="Digital Qs" component={ScreenB} />
        <Tab.Screen name="Samples" component={ScreenC} />
</Tab.Navigator>

Upvotes: 0

Views: 59

Answers (1)

Tommy Leong
Tommy Leong

Reputation: 3020

The idea is relatively simple, you will need to reset the TabNavigator route every time when your user tap on "Home" option.

The solution to different React Navigation version have been discussed here.

Upvotes: 1

Related Questions