Drawer-based Navigation
Learn how to navigate in React Native applications using a drawer.
We'll cover the following...
Along with stack-based and tab-based navigation, drawer-based navigation is another form of navigation used inside React Native applications. It is similar to tab-based navigation. The only difference is that instead of the tabs being located at the bottom of the application, we are provided with a drawer containing many options. Users can navigate to different parts of the application by clicking these options. The drawer is commonly placed on the left side of the application. However, it can also be placed on the right side. The illustration below shows how drawer-based navigation works.
Usage
To implement and use drawer-based navigation, we first have to import NavigationContainer from the @react-navigation/native library.
import { NavigationContainer } from '@react-navigation/native'
Next, we need to wrap our whole application inside the NavigationContainer using the <NavigationContainer></NavigationContainer> tag.
import React from "react";import { NavigationContainer } from '@react-navigation/native'const App = () => {return (<NavigationContainer>{/* Children components */}</NavigationContainer>);};export default App;
Now we have to import createDrawerNavigator from the @react-navigation/drawer library and use it to create an instance of the drawer-based navigator.
import React from "react";import { NavigationContainer } from '@react-navigation/native'import { createDrawerNavigator } from '@react-navigation/drawer';const Drawer = createDrawerNavigator();const App = () => {return (<NavigationContainer>{/* Children components */}</NavigationContainer>);};export default App;
Adding screen details
Once all the steps above have been completed successfully, we can use the Navigator and Screen methods of the created drawer-navigator instance to add screen details. Users will be ...