Screen space is a precious commodity on mobile. The drawer menu (or “hamburger menu”) is one of the most popular navigation patterns to help you save what you want while offering intuitive navigation. In this post, I will explain how to create a nested (multi-level) drawer menu using React Native and React Navigation.
Navigation in React Native ️
Navigation is the backbone of most apps built for production. The look and feel of navigation is critical to driving usage and engagement in mobile apps.
However, if you are a React Native developer, there is no clear opinion on how to create a navigation menu. React Native recommends a bunch of libraries for navigation. Each has its strengths depending on your needs, but there is no one clear winner for all use-cases.
I had to build a playground app for React Native to showcase UI Components library. It consists of eight different components, each of which supports different props, and over 50 different options.
It was not possible to show all the options inside the drawer at once without a multi-level drawer, which would scope the options based on the selected component. I couldn’t find a ready-made solution for this, so I needed to create a custom one.
For the base setup, I’m assuming you already have a React Native project setup with CRNA, Expo Kit, or the React Native CLI. Make sure you have the react-navigation library installed with yarn or npm. We’ll get started right away by using the Navigation API.
We’ll start with an example similar to the one documented in the DrawerNavigator official guide for React Navigation. We’ll create a simple drawer containing two drawer items: Home and Notifications.
custom drawer material
React Navigation enables all navigators to perform a lot of customization by passing the navigator configuration as the second parameter. We will use it to render certain custom content in addition to stock drawer items.
We’ll be passing a prop called ContentComponent to the config that will allow us to render custom content for the drawer. We will use it to show header and footer with custom DrawerItems from react-navigation.
This potentially unlocks a lot of things that can be done by controlling what’s inside the drawer.
create screen mapping
We need to create a nested drawer for each component we want to show. So let’s first register all the screens with the DrawerNavigator’s config. We have created a separate screen mapping file for the components. You can very well make your own conventions, or define the same object directly as the home screen component.
grouping outer drawers
The pattern I followed in mapping was to use a delimiter _ to group together the options from a component. For example, the navigation keys I used were “DataSearch_Basic” and “DataSearch_With Icon Position”. This is exactly what will help us combine the options of a single component like Datasearch. We will uniquely evaluate all the components needed to show for an exterior drawer.
We’ll create a util function to evaluate the outer drawer list items to render.
This function will return an object with unique components for the main components like (DataSearch, TextField) which we will render on the screen with the help of MaterialComponent custom component. We will also maintain a boolean to determine the content to be rendered on the drawer at a particular moment.
renderMainDrawerComponent is just a function that operates on the keys of the components object. It renders custom outer drawer items built on top of text and views from react-native. See full code here.