Categories
React Native

React Native: Bottom Tabs Navigator

Bottom Tabs Navigator is simple tab bar on the bottom of the screen, you switch between different screen or routes. Routes are initialized all tab screen components, they are not mounted until first focused.

Bottom Tabs Navigator

Installation Bottom Tabs Navigator

To use this tab navigator, you want to ensure that you have @react-navigation/native and its dependencies.

Install vector icons library

React Native Bottom Tabs Navigation Example:
Now create new “screens” directory in application root directory.


Then you need to create some screen files like HomeScreen.js, LoginScreen.js, RegisterScreen.js, AboutScreen.js and ProfileScreen.js in screens directory. Or If you have already some screens than skip new screen creations.

Now, open App.tsx file form React Native application directory and add following code in your App file.

Done, now run your app using following command:

Your app is ready with bottom tabs navigation. More details Bottom Tabs Navigator click here.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Hope it will help you.