React Native

React Native: Top Tabs Navigator

Top Tabs Navigator is material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Routes tab screen components for each route are mounted immediately.

Top Tabs Navigator

Installation Top Tabs Navigator

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

Installing dependencies into a bare React Native project

React Native Top 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 etc. in your screens directory. Or If you have already some screens than skip new screen creation.

Example HomeScreen:

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 top tabs navigation. More details Material Top Tab 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.

Related Articles