Customizing React Navigation Drawer
React Navigation is a popular navigation solution for mobile apps built with React Native. The library provides several routing and navigation options including Tab, Stack, Drawer and Switch navigations. It also provides interesting solutions for deep linking, redux integration, etc. This library comes fully loaded with good solutions to help you build great applications using React Native. It comes with good documentation that is definitely worth taking the time to go through.
This article is for Javascript developers building mobile applications with React Native. Knowledge of Javascript and how to set up basic drawer navigation with React Navigation is required. The article describes how to go from a plain, barebone drawer navigation to a well-designed drawer that fits into the application theme and design. This is necessary to ensure that the default drawer can be customized to reflect the look and feel of the entire app.
Drawer options are rendered as DrawerItems. These are contained in a SafeAreaView component, which is usually nested in a ScrollView to ensure that drawer options are scrollable.
Defining a custom drawer component
The default component can be easily overridden. More content can be added to the drawer. However, it is required to keep DrawerItems within the SafeAreaView.
A custom drawer component, as shown above, can be defined with additional contents to override the default drawer component.
Looks like a lot of code?… Here is a breakdown of this custom drawer component.
The component simply contains the default drawer with additional content to add a header, footer, and other contents to the drawer.
- The entire drawer component sits in a View container and styled to span the entire height of any device (in landscape and portrait position)
- This parent View container has 2 children — the ScrollView containing the SafeAreaView and a View that will serve as the drawer footer content. Note that this View can be nested within the ScrollView if you want your footer to scroll with the rest of the drawer content.
- The SafeAreaView contains a View with contents that will serve as the header of the drawer. This is followed by the DrawerItems required by React Navigation to render the routes you have defined in the navigator RouteConfigs. Hereafter other contents can be added to the drawer to suit your needs.
How to use a custom drawer content
createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)Navigators in React Native are called with 2 arguments — RouteConfigs defining the available routes in the drawer and DrawerNavigatorConfig to setup additional configuration for the drawer.
A custom drawer component can be used by setting the component to be the value of the contentComponent field of DrawerNavigatorConfig as shown above. The default drawer will be replaced with the custom drawer component along with other navigation configurations defined.
I hope this article showed enough to help you design amazing custom drawer components.
Feel free to reach out to me on Twitter @ike_dunamis or via email at ikeenjoku@gmail.com
