![]() 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 Bottom Tab Navigator install 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 navigation 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. ![]() In this example, we will make a Tab Navigator inside a Drawer Navigator so let’s get started. When we open Screen1 the Bottom Tab will be visible and on the other options, this Bottom Tab will be invisible. In this example, we have a navigation drawer with 3 screens in the navigation menu and a Bottom Tab on the first screen of the Navigation Drawer. I hope you have already seen our post on React Native Navigation Drawer because in this post we are just extending the last post to show the Bottom Tab View inside the Navigation Drawer. We will use react-navigation to make a navigation drawer and Tab in this example. This is an example of Bottom Tab View inside Navigation Drawer / Sidebar with React Navigation in React Native.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |