O'Reilly logo

React Native By Example by Richard Kho

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Connecting ToolbarAndroid and DrawerLayoutAndroid

The way we connect these two components together is to start by writing an Icon.ToolbarAndroid component:

<Icon.ToolbarAndroid 
  title={ 'Expense' } 
  titleColor={ '#7D878D' } 
  navIconName={ 'menu' } 
  height={ 56 } 
  backgroundColor={ '#4E92B5' } 
  onIconClicked={ () => this._openDrawer(); } 
/> 

Then, create a DrawerLayoutAndroid component and wrap it around two children: the Icon.ToolbarAndroid component you just created along with the Navigator following it:

 <DrawerLayoutAndroid drawerLockMode={ 'unlocked' } ref={ 'drawer' } renderNavigationView={ () => this._renderDrawerLayout() } > // Insert Toolbar here <Navigator initialRoute={{ index: 0 }} ref={ 'navigator' } renderScene={ (routes, navigator) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required