When I new to react-native development I found the hardest part of development is Navigation. At least it was for me. Then next challenge was to customizing each navigation because UI is the important aspect of mobile development. So lets see how we can customize the drawer of drawer navigation using react-navigation.

Create a empty app and import the necessary library we are going to use for customizing.

Lets create some screens to show say Screen A, Screen B and Screen C. I am showing only Screen A. Others are similar

Now lets see the drawer navigator

The main property to customize drawer is the contentComponent property of DrawerNavigator. The value of the contentComponent can be define as a separate component which helps in customizing it.

Now let see our App.js file which will call the navigator

Now we have changed the UI of the drawer. If you do not want to show some of the routes in drawer just skip them in drawerContentComponents.js but still you will have the navigation functionality between them because its a root in your DrawerNavigator.

You can customize drawer with your creative ideas and styling. This will help in achieving native app like drawers eg Gmail app, Twitter app etc.