I've been looking for a way to disable edge-swipe open of a Drawer. When using horizontal lists, it's accidentally open the Drawer instead of scrolling the list across.

Please check my bellow code:

<Drawer.Navigator 
            screenOptions={{
                swipeEdgeWidth: 0,
            }}            
            drawerContent={(props) => <Menu props={props}  />}>
            <Drawer.Screen
                name="screenWithDrawer1"
                options={{
                    swipeEnabled: false,
                    unmountOnBlur: true,
                    headerShown: true,
                    drawerItemStyle: { display: "none" },
                    drawerIcon: ({ color }) => (
                        <FontAwesome5 name="calculator" size={20} color={color} />
                    ),
                    drawerLabel: 'Purchase Menu',
                    drawerLabelStyle: { fontSize: 16, paddingLeft: 6 },
                    title: "Purchase Menu",

                    headerTitleAlign: 'center',
                    headerStyle: { backgroundColor: '#f5a756' }
                }}
            >
                {() => (
                    <Stack.Navigator initialRouteName='purchasemenu'
                    >
                        <Stack.Screen
                            name='purchasemenu'
                            component={Purchasemenu}
                            options={{ header: () => null }}

                        />
                        <Stack.Screen
                            name='purchaseOrdersList'
                            component={PurchaseOrdersList}
                            options={{ header: () => null }}
                        />
                        <Stack.Screen
                            name='purchaseWareHouse'
                            component={PurchaseWareHouse}
                            options={{ header: () => null }}
                        />

                        <Stack.Screen
                            name='settings'
                            component={Settings}
                            options={{ header: () => null }}
                        />

                    </Stack.Navigator>
                )}
            </Drawer.Screen>
</Drawer.Navigator>

I have set

swipeEnabled: false 

but it's not working.

If anyone can help me I will be grateful.

I've been looking for a way to disable edge-swipe open of a Drawer. When using horizontal lists, it's accidentally open the Drawer instead of scrolling the list across.

Please check my bellow code:

<Drawer.Navigator 
            screenOptions={{
                swipeEdgeWidth: 0,
            }}            
            drawerContent={(props) => <Menu props={props}  />}>
            <Drawer.Screen
                name="screenWithDrawer1"
                options={{
                    swipeEnabled: false,
                    unmountOnBlur: true,
                    headerShown: true,
                    drawerItemStyle: { display: "none" },
                    drawerIcon: ({ color }) => (
                        <FontAwesome5 name="calculator" size={20} color={color} />
                    ),
                    drawerLabel: 'Purchase Menu',
                    drawerLabelStyle: { fontSize: 16, paddingLeft: 6 },
                    title: "Purchase Menu",

                    headerTitleAlign: 'center',
                    headerStyle: { backgroundColor: '#f5a756' }
                }}
            >
                {() => (
                    <Stack.Navigator initialRouteName='purchasemenu'
                    >
                        <Stack.Screen
                            name='purchasemenu'
                            component={Purchasemenu}
                            options={{ header: () => null }}

                        />
                        <Stack.Screen
                            name='purchaseOrdersList'
                            component={PurchaseOrdersList}
                            options={{ header: () => null }}
                        />
                        <Stack.Screen
                            name='purchaseWareHouse'
                            component={PurchaseWareHouse}
                            options={{ header: () => null }}
                        />

                        <Stack.Screen
                            name='settings'
                            component={Settings}
                            options={{ header: () => null }}
                        />

                    </Stack.Navigator>
                )}
            </Drawer.Screen>
</Drawer.Navigator>

I have set

swipeEnabled: false 

but it's not working.

If anyone can help me I will be grateful.

• react-native

Share Improve this question Follow asked Nov 19, 2024 at 8:35 user28353622user28353622

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

There are multiple ways you can resolve this issue

1. disable swipe & gestures for the screen with the horizontal carousel

<Drawer.Screen name="screenWithDrawer1" 
   options={{ 
     swipeEnabled: false, // Disable swipe for this screen 
     gestureEnabled: false, // disable gestures for this screen
   // Other options... }} > 
   {/* Screen Content */} 
</Drawer.Screen>

2. Increase your swipe edge & see if this takes effect

<Drawer.Navigator 
  screenOptions={{ swipeEdgeWidth: 1, // Minimum swipe edge width }} 
  drawerContent={(props) => 
    <Menu props={props} />
  }> {/* Other configurations */} 
</Drawer.Navigator>

Please try with bellow code

 useEffect(() => {
        const onBackPress = () => {
         
          return true;
        };
        const backHandler = BackHandler.addEventListener(
            'hardwareBackPress',
            onBackPress
          );
        
          return () => backHandler.remove();
 }, []);