CODEWITHSUNDEEP
react-native
L.Learner
L.Learner

Reputation: 129

Can we have common toolbar across all screens in react native android

I am new to React native. How is it possible to achieve common ToolbarAndroid across all the screens.I want to implement navigaton drawer on that tool bar which is common to all screens I navigate.

Upvotes: 2

Views: 1128

Answers (2)

olup otilapan
olup otilapan

Reputation: 504

I am not sure for the ToolbarAndroid component, but as you might need navigation, the Navigator element implements a NavigationBar consistent to all navigated screens (that you can probably fill with andoidtoolbar anyway).

Now, If i understood well enough, you want to have your drawer common to all screens. I guess my way to do that would be to use the DrawerLayoutAndroid component, and to make it consistent i would wrap my navigator inside the drawer layout like this :

<DrawerLayoutAndroid
  drawerWidth={250}
  drawerPosition={DrawerLayoutAndroid.positions.Left}
  renderNavigationView={() => navigationView}>

  <Navigator
      initialRoute={{id: 'MainPage'}}
      renderScene={this.renderScene.bind(this)}

      navigationBar={
        <Navigator.NavigationBar style={{backgroundColor: '#263872', elevation:3}}
            routeMapper={NavigationBarRouteMapper} /> } 
    />
</DrawerLayoutAndroid>

Upvotes: 0

Martin Konicek
Martin Konicek

Reputation: 40934

Check out the code of this app which uses a navigation drawer and a toolbar across all screens: https://github.com/fbsamples/f8app

Specifically check out the Header and DrawerLayout components.

There's a website to explain how the app was built: http://makeitopen.com

Upvotes: 1

Related Questions