CODEWITHSUNDEEP
react-nativereact-navigation
Dark Matter
Dark Matter

Reputation: 489

How to disable drawer inside Stack Navigator nested inside Drawer Navigator?

I have a nested stack navigator inside a drawer navigator and I don't want the user to be able to swipe from the left and open the drawer when they aren't on the first page of the stack navigator. I found some answers but they seem to use some old syntax that isn't used in the official documentation.


// stack navigator
const Items = () => {
    const IStack = createStackNavigator()
    return (
        <IStack.Navigator initialRouteName="Items" screenOptions={{ headerShown: false }} >
            <IStack.Screen  name="Items" component={ItemSelect} options={{ ...TransitionPresets.SlideFromRightIOS }} />
            <IStack.Screen name="Item" component={ItemScreen} options={{ ...TransitionPresets.SlideFromRightIOS }} />
        </IStack.Navigator>
    )
}
// drawer
const App = () => {
  return (
    <NavigationContainer theme={MyTheme}>
        <StatusBar barStyle="light-content" backgroundColor="#232931" />
        <Drawer.Navigator initialRouteName="Items">
            <Drawer.Screen name="Items" component={Items} />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}

I want to disable the drawer on the second screen of the stack navigator i.e ItemScreen.

Upvotes: 3

Views: 1613

Answers (1)

Dark Matter
Dark Matter

Reputation: 489

Here's what I ended up doing -

<Drawer.Screen 
    name="Items" 
    component={Items} 
    options={({ route }) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? 'Items'
                if (routeName == "Item")
                    return ({swipeEnabled: false})
            }} 
/>

More about getFocusedRouteNameFromRoute. It's weird to see no answers anywhere for such a simple scenario.

Upvotes: 11

Related Questions