CODEWITHSUNDEEP
react-nativetabsreact-navigation
Brian
Brian

Reputation: 1036

How to create top tabs in React Navigation v3?

I can see for the documentation that v3's createTabNavigator has been removed. It was replaced with createBottomTabNavigator, createMaterialTopTabNavigator and createMaterialBottomTabNavigator.

I am using createBottomTabNavigator for the main screen navigation but would like to have Tabs at the top of each screen for categories of content.

We are not using material design in this project so the createMaterialTopTabNavigator option done not help use.

Upvotes: 0

Views: 151

Answers (1)

Zaytri
Zaytri

Reputation: 2574

Use createMaterialTopTabNavigator and customize its styling options via tabBarOptions to fit the design of your project.

If you need more customization than is given, then you can override the tabBarComponent with your own. Here's the source code for the tabBarComponent that createMaterialTopTabNavigator uses by default as reference for creating your own custom tabBarComponent.

For clarity in why createTabNavigator was removed in 3.0, here's the React Navigation 2.0 release notes. What createTabNavigator used to do was use createBottomTabNavigator on iOS and createMaterialTopTabNavigator on Android, which was not practical if you wanted your app to look the same on both devices, so it was split into those two functions.

Upvotes: 2

Related Questions