React Native:-how To Use A Common Drawer And Toolbar Across All Pages With Control

I am a newbie in React Native. I wanna make a drawer and toolbar for android and ios both. I wrote the code of drawer and toolbar in my mainpage where I have navigator. Like for eg

Solution 1:

Maybe you should have a look at react-native-router-flux. You can define your scene transitions in one central location, and also declare which scenes will be wrapped by a Drawer.

import {Scene, Router} from'react-native-router-flux';

classAppextendsReact.Component {
  render() {
    return<Router><Scenekey="root"><Scenekey="login"component={Login}title="Login"/><Scenekey="register"component={Register}title="Register"/><Scenekey="drawer"component={Drawer}open={false} ><Scenekey="home"component={Home}/>
                    ....
            </Scene><Scenekey="products"component={Products}/></Scene></Scene>
    </Router>
  }
}

For the Toolbar actions, you can simply have a Toolbar component inside each scene.

classHomeextendsReact.Component {
  render() {
    return (
      <View><Toolbar/></View>
  }
}

classProductsextendsReact.Component {
  render() {
    return (
      <View><Toolbar/></View>
  }
}

Solution 2:

If you're using redux (or something else alike that has a single place to keep your app state) you can make these objects references items inside your state tree. For instance, you could create a property inside your state (store.navigationState.currentScene) and make your Toolbar.subtitle points to that.

Now, everytime you navigate to a different scene, you could update your currentScene and the subtitle of your toolbar would also change.

Solution 3:

The best way to do this kind of navigation issues is with react-router so you can decide the route configuration of every view. You can create an element to be shown on some subelements but not on others.

Also you can know the route where you are and change elements on a component according to that. Here you can find more information about how to get that.