#Android navigation drawer set icon install
#Android navigation drawer set icon code

(Custom Menu with large profile Image and Options) // Custom Navigation Drawer / Sidebar with Image and Icon in Menu OptionsĮxport default CustomSidebarMenu To Run the React Native App

Open CustomSidebarMenu.js in any code editor and replace the code with the following code. This is Third Page under Second Page Option Now Open App.js in any code editor and replace the code with the following code App.js // Custom Navigation Drawer / Sidebar with Image and Icon in Menu Options To start with this example you need to create a directory named pages in your project and create three files Firstpage.js, SecondPage.js, ThirdPage.js in it.įor the custom sidebar, make a file called CustomSidebarMenu.js in the project directory (not in the pages directory) Note: If you skip this step, your app may crash in production even if it works fine in development. To finalize the installation of react-native-gesture-handler, add the following at the top (make sure it’s at the top and there’s nothing else before it) of your entry files, such as index.js or App.js: import 'react-native-gesture-handler'

Please use the following command to install CocoaPods npx pod-install ios

You can safely ignore most warnings as long as your app builds. They are usually caused by incorrect version ranges specified in some packages. You might get warnings related to peer dependencies after installation. If you’re getting an error “Unable to resolve module”, you need to install that module in your project. Note: When you use a navigator, you’ll need to follow the installation instructions of that navigator for any additional dependencies. These steps are enough for the drawer navigation but in this example, we are also using between screens so we will also need Stack Navigator npm install -save For the Drawer Navigator install npm install -saveĤ. Other supporting libraries react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context -saveģ. Install react-navigation npm install -saveĢ. To install the dependencies open the terminal and jump into your project cd ProjectNameġ. Installation of Dependenciesįor React Native Navigation Drawer we need to add react-navigation and other supporting dependencies. If you want to start a new project with a specific React Native version, you can use the -version argument: react-native init ProjectName -version X.XX.X react-native init ProjectName -version will make a project structure with an index file named App.js in your project directory. Run the following commands to create a new React Native project react-native init ProjectName Open the terminal and go to the workspace and run npm install -g react-native-cli

Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. We are going to use react-native init to make our React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. To set the custom view in Navigation Drawer / Sidebar Menu

In the custom Sidebar, we will have a profile image and additional options with the icon. We are going to use drawerContent prop of Drawer.Navigator to set our custom view which is CustomSidebarMenu.js in this example.

#Android navigation drawer set icon code

#Android navigation drawer set icon install