Add Drawer Navigation to a React Native App
Creating a drawer menu
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:05] In this lesson, we are going to add a drawer menu to our app. It looks like this.
[00:06 - 00:21] Similarly to the bottom navigation, when it comes to drawer menus, there are many libraries that work well. But as we already are using Re-ignavigation library, there is a Re-ignavigation drawer dependency that creates the drawer menu for us.
[00:22 - 00:29] We are going to follow the official documentation that guides us step by step through the process. The first step is installing the dependency.
[00:30 - 00:36] We do that by running the following comment. After the installation is done, we can start the implementation.
[00:37 - 00:45] We start from the objects file where our navigation is implemented. In the example, we can see that drawer is very similar to start navigator.
[00:46 - 00:56] It contains all the screens that can be used inside it. Our case is a little bit trickier because we already have bottom navigation that contains two screens.
[00:57 - 01:10] What we want to do is to place bottom navigation inside the drawer and treat it as any other screen. Let's import CreateDrawerNavigator from Re-ignavigationDrawer and define our drawer navigator.
[01:11 - 01:22] Now we create a drawer navigator function that will return drawer navigator. In our case, we'll have one screen inside the drawer which is our bottom navigation.
[01:23 - 01:31] The last step is to actually use the drawer navigator as one of our screens inside navigator. We want to replace home screen with it.
[01:32 - 01:42] Now we render the bottom navigator component but we can safely replace it with a drawer navigator because it contains bottom navigator. Let's run our app.
[01:43 - 01:47] If we swipe from the left to right, our menu will appear. Perfect.
[01:48 - 01:54] Currently, there is not much going on there. But it will be cool if we could take control over what is displayed.
[01:55 - 02:05] Luckily for us, there is a prop called drawer content that allows us to pass any component we want. Let's create a component called drawer content.
[02:06 - 02:11] For now, let's return some text. We can now pass this component with drawer content prop.
[02:12 - 02:17] As we can see, our text is there on the top left side of the screen. Excellent.
[02:18 - 02:31] Of course, this is not the best looking menu you have ever seen but for the purpose of this course, I improved the drawer content component to look like this. It uses basic components from Reiignative and Reiignative paper.
[02:32 - 02:40] Now our menu looks like something that might be seen in real applications. You can add more options to it once your app starts growing.
[02:41 - 02:47] For now, this is enough. To sum up, in this lesson, we added the drawer menu to our app.
[02:48 - 02:53] And our app is now complete. We have created all the screens we had in our plan.
[02:54 - 03:01] Now, it's your turn to take this up to another level and implement something that will be used in real world. Good luck.
[03:02 - 03:04] Thank you and see you in the next courses.
This lesson preview is part of the Creating a React Native Login course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Creating a React Native Login, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
In this lesson, we are going to add a drawer menu to our app. It looks like this. Similarly to the bottom navigation, when it comes to drawer menus, there are many libraries that work well. But as we already are using Re-ignavigation library, there is a Re-ignavigation drawer dependency that creates the drawer menu for us. We are going to follow the official documentation that guides us step by step through the process. The first step is installing the dependency. We do that by running the following comment. After the installation is done, we can start the implementation. We start from the objects file where our navigation is implemented. In the example, we can see that drawer is very similar to start navigator. It contains all the screens that can be used inside it. Our case is a little bit trickier because we already have bottom navigation that contains two screens. What we want to do is to place bottom navigation inside the drawer and treat it as any other screen. Let's import CreateDrawerNavigator from Re-ignavigationDrawer and define our drawer navigator. Now we create a drawer navigator function that will return drawer navigator. In our case, we'll have one screen inside the drawer which is our bottom navigation. The last step is to actually use the drawer navigator as one of our screens inside navigator. We want to replace home screen with it. Now we render the bottom navigator component but we can safely replace it with a drawer navigator because it contains bottom navigator. Let's run our app. If we swipe from the left to right, our menu will appear. Perfect. Currently, there is not much going on there. But it will be cool if we could take control over what is displayed. Luckily for us, there is a prop called drawer content that allows us to pass any component we want. Let's create a component called drawer content. For now, let's return some text. We can now pass this component with drawer content prop. As we can see, our text is there on the top left side of the screen. Excellent. Of course, this is not the best looking menu you have ever seen but for the purpose of this course, I improved the drawer content component to look like this. It uses basic components from Reiignative and Reiignative paper. Now our menu looks like something that might be seen in real applications. You can add more options to it once your app starts growing. For now, this is enough. To sum up, in this lesson, we added the drawer menu to our app. And our app is now complete. We have created all the screens we had in our plan. Now, it's your turn to take this up to another level and implement something that will be used in real world. Good luck. Thank you and see you in the next courses.