This tutorial will show you how to integrate Drawer Navigation in React Native properly. In terms of some of the packages I use. One of those is React-Navigation. React Navigation 5 seems to be in full swing, so I thought it would be cool to write a tutorial to showcase how you can create a Drawer Navigator (that is the side menu) using React Navigation and how much easier it is.
Firstly, if you haven’t already, you will need to create a react native project using the command.
react-native init MyRNNavigationProject
Once this has been completed, you need to open the folder this command generates using your favorite code editor. I use VS Code A LOT.
Once you have done this, you will need to install the main react-navigation npm package using the below command
npm install @react-navigation/native
We will also need to install some dependencies used in conjunction with react-navigation. The command to do this is below.
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
react-native-gesture-handler — Helps manage gestures within the mobile app
react-native-reanimated — Allows for greater flexibility and usage with the Animated API
react-native-screens — exposes native navigation components
react-native-safe-area-context — Method to handle safe areas
The next step is to ensure the components are properly linked to iOS and the info.plist file by entering each command into the terminal of your code editor
cd ios
pod install
cd ..
Furthermore, to finish the package ‘react-native-screens’ initialization, you need to add the below lines to the build.gradle file found in your project’s “android/app” folder.
implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
To finish the initialization of ‘react-native-gesture-handler,’ you need to add the below three lines to the top of the file ‘MainActivity.Java’
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
In addition, you need to add the below method underneath the method “getMainComponentName”
@Override
protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this); }
};
}
After this has been completed, you will need to install another npm package which will install the necessary drawer components.
npm install @react-navigation/drawer
You will now need to import the navigation container component from react-navigation
import { NavigationContainer } from '@react-navigation/native';
The navigation container manages the app state and interlinks the top-level navigator with the rest of the app code.
After importing the navigation container, you must import the “createDrawerNavigator” component from the react-navigation drawer.
import { createDrawerNavigator } from '@react-navigation/drawer';
“createDrawerNavigator” is a component that renders a drawer navigator that can be opened and closed by gestures.
You will then need to create a variable that contains an instance of this component just below the import statements.
const MyDrawer = createDrawerNavigator();
The next step is to remove the original gobbly goop within the “App” variable and replace it with something much more straightforward. Like the below
function App(){return(<NavigationContainer> </NavigationContainer>)}
The navigation container will be at the top level, and the drawer navigator will be placed within this.
Next, create two separate functions acting as screens that we can navigate 2. If you are feeling lazy, you can copy and paste mine below, haha
function ContactUs() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Contact Us</Text></View>);}function Settings() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings screen</Text></View>);}
The last thing to do is to create a function that will return a drawer navigator component and its screens.
So first off, write the below code.
function DrawerContainer() {return ();}
Next, you will need to use the variable you created earlier, which is the instance of the drawer navigator that was imported, i.e., since I named the variable “MyDrawer” I will be referencing the drawer navigator using this like below. In addition, we can set an initial route name in the “navigator” so that when the drawer loads, it will always default to a specific route.
<MyDrawer.Navigator initialRouteName="ContactUs"></MyDrawer.Navigator>
So now your function will look like the below.
function DrawerContainer() {return (<MyDrawer.Navigator></MyDrawer.Navigator>);}
You will now need to use the “screen” component of the variable you made, the screen component will be used to a new item to the drawer component.
The “screen” component has a few props, but for this tutorial, we will only 2. Those are “name” and component. The name property is the text the drawer item will display when in the drawer, and the component property is the component the drawer item will navigate to when clicked.
You need to reference the two functions you created inside the component prop. Since I have functions called “ContactUs” and “Settings” that return a component, I will reference them. So now my drawer navigator function looks like the one below.
function DrawerContainer() {return (<Drawer.Navigator><Drawer.Screen name="Contact Us" component={ContactUs} /><Drawer.Screen name="Settings" component={Settings} /></Drawer.Navigator>);}
However, our job is not done. We need to insert the drawer container into our absolute top-level component, the “App” function. This is quickly done with the below code.
function App() {return (<NavigationContainer><DrawerContainer /></NavigationContainer>);}
As you can see, we have a navigation container. Inside is the function that contains our drawer navigator, which will navigate to different screens depending on what drawer item is clicked.
You then export the App component using the below code
export default App;
Now you can run the command
react-native run-ios