CODEWITHSUNDEEP
javascriptandroidfacebookreact-native
Moussawi7
Moussawi7

Reputation: 13279

React Native :Disable Android Drawer

I am using DrawerLayout as a part of my project, but i don't want to give the user the ability to open the drawer in some pages, and I cannot find an option to disable it. any trick with that?.

this is a portion of my code:

 return (
 <DrawerLayout
 drawerWidth={300}
 ref="drawer"
 renderNavigationView={() => navigationView}> 
 <Router hideNavBar={true}>
 <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
 <Route initial={true} name="empty" component={Empty}/>
 <Route name="login" component={Login} onLoginSuccess={()=>{this.onLoginSuccess()}}/>
 <Route name="pages">
 <Router footer={Footer} header={Header} hideNavBar={true}>
 <Route name="issues" initial={true} component={Issues} title={"123"}/>
 <Route name="analytics" component={Analytics} title={"456"}/>
 </Router>
 </Route>
 </Router>
 </DrawerLayout>
 );

Upvotes: 1

Views: 600

Answers (3)

BK19
BK19

Reputation: 1534

By setting default value to null, drawer got disabled.

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Home':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return null   //For setting Home left button null
        }
    },
    RightButton(route, navigator, index, navState) {
      switch (route.id) {
          case 'Home':
            return (
            <TouchableOpacity
                style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                <Icon name={'map'} size={25} color={'white'} />
            </TouchableOpacity>
            )
            default:
              return null  //For setting Home right button null
          }
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

Upvotes: 1

Janic Duplessis
Janic Duplessis

Reputation: 687

There is a new prop drawerLockMode in 0.22.0-rc that allows to lock the drawer.

http://facebook.github.io/react-native/releases/0.22/docs/drawerlayoutandroid.html#drawerlockmode

Upvotes: 1

agenthunt
agenthunt

Reputation: 8678

If the router supports nested routes, you can enclose those in DrawerLayout only for those where you need it. and other routes as siblings to those.

<Router>
   <Route>
      <DrawerLayout>
          <Route/>
          <Route/>
     </DrawerLayout>
   </Route>
   <Route/>
   <Route/>
</Router>

If the router does not support nested routes, you can use 2 different Navigators one at top and one for all routes where you need DrawerLayout.

<Navigator ref="navigator" style={styles.navigator} initialRoute={{
        name: 'Home',
        index: 0
      }} renderScene={this.renderScene.bind(this)}  configureScene={this.configureScene}
      />

  renderScene(route, navigator) {
    switch (route.name) {
      case 'Home':{
        return (<DrawerLayout>
                 <Navigator />
               </DrawerLayout>)
        }
      case 'Route2': {
        return <Route2 navigator={navigator}/>
        }
.......
    }
  }

Upvotes: 1

Related Questions