Disable the side menu drawer in react native

Question

I have created a page with sidemenu using the react-native and used the react-navigation for routing. I want to disable the sidemenu screen which is appearing through left slide side gesture.

  export const StackNav = StackNavigator(
    {
      Login: {
        screen: Login,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
      Signup: {
        screen: Signup,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
    },
    {
      initialRouteName: "Login"
    }
  );

  //for admin login, run campaign
  const TabNav1 = TabNavigator(
    {
      SelectCarriers: {
        screen: SelectCarriers,
        navigationOptions: {
          tabBarLabel: "Select Carriers"
        }
      },
      ErrorRecords: {
        screen: ErrorRecords,
        navigationOptions: {
          tabBarLabel: "Error Records"
        }
      }
    },
    {
      tabBarPosition: "top",
      tabBarOptions: {
        labelStyle: {
          fontWeight: "bold"
        }
      }
    }
  );
  //for Notification page or carrier login
  const TabNav = TabNavigator(
    {
      Notification: {
        screen: Notification,
        navigationOptions: {
          tabBarLabel: "Notification"
        }
      },
      NotificationHistory: {
        screen: NotificationHistory,
        navigationOptions: {
          tabBarLabel: "Notification History"
        }
      }
    },
    {
      tabBarPosition: "bottom"
    }
  );
  const TabNavStack = StackNavigator({
    Main: {
      screen: TabNav,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "Notification"
      })
    }
  });

  const sidemenuNav = StackNavigator({
    Dashboard: {
      screen: Dashboard,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
            <Text style={{ paddingLeft: 15 }}>
              <Icon name="navicon" style={{ fontSize: 25 }} />
            </Text>
          </TouchableOpacity>
        )
      })
    },
    ViewRanking: {
      screen: ViewRanking,
      navigationOptions: ({ navigation }) => ({
        title: "View Ranking"
      })
    },
    SelectCarriers: {
      screen: SelectCarriers,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "SELECT CARRIER"
      })
    },
    RunCampaign : {
      screen: RunCampaign,
      navigationOptions: ({navigation}) =>({
        title: "RUN"
      })
    },
    SelectedCampaign : {
      screen: SelectedCampaign,
      navigationOptions: ({navigation}) => ({
        title: "SELECTED CAMPAIGN",
      })
    },
    ChangePassword: {
      screen: ChangePassword,
      navigationOptions: {
        title: 'Change Password'
      }
    },
    EmailAnalytics: {
      screen: EmailAnalytics,
      navigationOptions: {
        title: 'Email Analytics'
      }
    },
    ViewCampaignHistory: {
      screen: ViewCampaignHistory,
      navigationOptions: {
        title: 'View Campaign History'
      }
    },
    CheckResponse: {
      screen: CheckResponse,
      navigationOptions: {
        title: 'CHECK RESPONSE'
      }
    },
    CampaignResult: {
      screen: CampaignResult,
      navigationOptions: {
        title: 'CAMPAIGN RESULT'
      }
    },
  });

  const DrawerNav = DrawerNavigator(
    {
      Item1: {
        screen: sidemenuNav
      }
    },
    {
      contentComponent: SideMenu,
      drawerWidth: Dimensions.get("window").width - 120
    }
  );

  export const PrimaryNav = StackNavigator(
    {
      StackNav: { screen: StackNav },
      TabNavStack: { screen: TabNavStack },
      DrawerNav: { screen: DrawerNav }
    },
    {
      // Default config for all screens
      headerMode: "none",
      initialRouteName: "StackNav"
    }
  );

So, here in the sidemenuNav, i want to disable the side drawer for ViewRanking, SelectCarriers....

I have tried drawerLockMode with navigation options but not worked.

i have referred some issues but no use.

After suggesting the answer mark it as duplicate or vote down

Answer 1

drawerLockMode is the option you are finding. Doc (No drawerLockedMode)

Specifies the lock mode of the drawer. This can also update dynamically by using screenProps.drawerLockMode on your top level router.

And there are three types option. Doc

• unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
• locked-closed, meaning that the drawer will stay closed and not respond to gestures.
• locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).

Thus, add conditional statement in navigationOptions of your sidemenuNav. Doc

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

And this is my tested code.

const AuthStackNavigation = createStackNavigator({
  HomeStack: HomeScreen,
  LoginStack: HomeScreen,
  RegisterStack: HomeScreen,
}, {
  initialRouteName: 'HomeStack',
  navigationOptions: {
    gesturesEnabled: false,
  },
})

AuthStackNavigation.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.key > 0) {
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

const DashboardStack = createStackNavigator({
  Dashboard: {
    screen: Dashboard,
  }
})

const DrawerNav = createDrawerNavigator({
  AuthStackNavigation: {
    screen: AuthStackNavigation,
    // navigationOptions: {
    //   gesturesEnabled: false,
    //   drawerLockMode: 'locked-close'
    // }
  },
  DashboardStack: {
    screen: DashboardStack,
  },
  ThirdScreen: Dashboard,
})

...

const MainNavigation = createSwitchNavigator({
  HomeDrawer: DrawerNav,
	Tab: TabNavigationComponent,
  AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})

export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.

Added

I totally tested with your screen architect and checked it worked well.

/**
 * Disable the side menu drawer in react native
 * Test code: https://stackoverflow.com/questions/52968354/disable-the-side-menu-drawer-in-react-native/52970168?noredirect=1#comment92875031_52970168
 *
 */

import {
  createStackNavigator,
	createDrawerNavigator,
	createBottomTabNavigator,
} from 'react-navigation';

import { Platform, TouchableOpacity, Text } from 'react-native';
import React from 'react';


import HomeScreen from './Home';
import Dashboard from './Dashboard';
import CheckBoxScreen from './CheckBoxTest';

import TabBar from './TabBar';
// import createBottomTabNavigator from 'react-navigation-tabs/dist/utils/createBottomTabNavigator';

export const StackNav = createStackNavigator(
	{
		Login: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
		Signup: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
	},
	{
		initialRouteName: "Login"
	}
);

//for admin login, run campaign
const TabNav1 = createBottomTabNavigator(
	{
		SelectCarriers: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Select Carriers"
			}
		},
		ErrorRecords: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Error Records"
			}
		}
	},
	{
		tabBarPosition: "top",
		tabBarOptions: {
			labelStyle: {
				fontWeight: "bold"
			}
		}
	}
);
//for Notification page or carrier login
const TabNav = createBottomTabNavigator(
	{
		Notification: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification"
			}
		},
		NotificationHistory: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification History"
			}
		}
	},
	{
		tabBarPosition: "bottom"
	}
);
const TabNavStack = createStackNavigator({
	Main: {
		screen: TabNav,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "Notification"
		})
	}
});

const sidemenuNav = createStackNavigator({
	Dashboard: {
		screen: HomeScreen,
		navigationOptions: ({ navigation }) => ({
			headerLeft: (
				<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
					<Text style={{ paddingLeft: 15 }}>
						{/* <Icon name="navicon" style={{ fontSize: 25 }} /> */}
						icon
					</Text>
				</TouchableOpacity>
			)
		})
	},
	LoginStack: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			title: "View Ranking"
		})
	},
	SelectCarriers: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "SELECT CARRIER"
		})
	},
	RunCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) =>({
			title: "RUN"
		})
	},
	SelectedCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) => ({
			title: "SELECTED CAMPAIGN",
		})
	},
	ChangePassword: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Change Password'
		}
	},
	EmailAnalytics: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Email Analytics'
		}
	},
	ViewCampaignHistory: {
		screen: Dashboard,
		navigationOptions: {
			title: 'View Campaign History'
		}
	},
	CheckResponse: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CHECK RESPONSE'
		}
	},
	CampaignResult: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CAMPAIGN RESULT'
		}
	},
}, {
	navigationOptions: {
    gesturesEnabled: false,
    // drawerLockMode: 'locked-closed' // not work
  },
});

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};


const DrawerNav = createDrawerNavigator(
	{
		Item1: {
			screen: sidemenuNav
		}
	},
	{
		// contentComponent: SideMenu,
		// drawerWidth: Dimensions.get("window").width - 120
	}
);

export const PrimaryNav = createStackNavigator(
	{
		StackNav: { screen: StackNav },
		TabNavStack: { screen: TabNavStack },
		DrawerNav: { screen: DrawerNav }
	},
	{
		// Default config for all screens
		headerMode: "none",
		initialRouteName: "DrawerNav"
	}
);

export default PrimaryNav // Stack, Drawer, Switch naviagtions return react component.

I am not sure what is wrong in your code but use recent react-navigation with recommend methods as createSomeNavigator instead of deprecated as DrawerNavigator, StackNavigator and so on. Good luck.