In this video, we expand on React Navigation with Drawer Navigation in React-Native. Specifically how to use Drawers (slider menus) to navigate around our screens instead of using the navigator.
Prior to watching this video please see the previous video on React Navigation here or if you need a refresher check out the first video in the series “Started Using React Native For Your Mobile Applications” here.
Drawer Navigation in React-Native focuses on:
- Required Dependencies
- Drawer Navigation
For a full list of components and APIs go to https://reactnative.dev/docs/accessibilityinfo
Drawer Navigation
Drawer Navigation is a common pattern in mobile applications to hide a menu or “Drawer” off the screen on left (sometimes right) side for navigating between screens. In order to see this menu, the user must navigate to it by swiping from the edge of the screen to the right (or left depending on the location of the drawer) to slide in the Drawer. One way to think of a React Drawer is like a dresser drawer. When you want to see something inside the drawer you have to slide it open. and when you are done looking inside or selecting an item you close it. The same principle applies here.
Difference between Drawer and Stack
The stack navigator works by pushing and popping screens onto the stack. The stack is useful for navigating back and forth between the screens. The drawer navigation actually replaces the current screen. No back button. We use the Drawer to change the screen.
Installation and setup
Just like in previous navigation discussions the React Drawer Navigator lives in a separate library.
In order to use this drawer navigator, we must import it from @react-navigation/drawer:
npm install @react-navigation/drawer
Drawer Navigation in React-Native
Additional Resources
- React is an open-source, front-end, JavaScript library for building user interfaces or UI components. In addition, Facebook and a community of individual developers and companies help maintain it. Additionally, React can be useful as a base in the development of single-page or mobile applications.
- Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the Chrome V8 engine and executes JavaScript code outside a web browser.
- Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux, and macOS. In addition, it includes support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.
- Android software development is the process by which applications are created for devices running the Android operating system.
- Xcode is Apple’s integrated development environment for macOS and is used to develop software for macOS, iOS, iPadOS, watchOS, and tvOS.
Finally, this series comes from our mentoring/mastermind classes. These classes are virtual meetings that focus on how to improve our technical skills and build our businesses. After all the goals of each member vary. However, this diversity makes for great discussions and a ton of educational value every time we meet. We hope you enjoy viewing this series as much as we enjoy creating it. As always, this may not be all new to you, but we hope it helps you be a better developer.