Javatpoint Logo
Javatpoint Logo

React Native Drawer Navigation
(createDrawerNavigator)

React Native Drawer Navigation is an UI panel which displays the app's navigation menu. By default it is hidden when not in use, but it appears when user swipes a finger from the edge of the screen or when user touches at the top of drawer icon added at app bar.

React Native Drawer Navigation imports the createDrawerNavigator from the react-navigation library.

It implements the createDrawerNavigator() to add the list of classes (screens).

To open and close the drawer, use the following helper methods:

If you like to toggle your drawer then call the following method:

Each of the above methods openDrawer(), closeDrawer(), and toggleDrawer() are simply dispatching actions as:

Before creating the React Native drawer navigation, first go through the React Native Navigation where we discussed the react-navigation installation process.

React Native Drawer Navigation Example

Create two separate classes "DashboardScreen" and "WelcomeScreen" in the react native app to display on screen. Add these screens to createStackNavigator and add "md-menu" icon of 'react-native-vector-icons/Ionicons' package. On pressing the menu icon, call navigation.openDrawer() method to open drawer.

Now, import createDrawerNavigator from 'react-navigation' package and implement createDrawerNavigator(). After that add the stack navigation screen over it.

Output:

React Native Drawer Navigation React Native Drawer Navigation
React Native Drawer Navigation
Next TopicAsyncStorage




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA