Tab navigators for React Navigation.
Open a Terminal in the project root and run:
yarn add react-navigation-tabs@alpha
If you are using Expo, you are done. Otherwise, continue to the next step.
Install and link react-native-gesture-handler
and react-native-reanimated
. To install and link them, run:
yarn add react-native-reanimated react-native-gesture-handler
react-native link react-native-reanimated
react-native link react-native-gesture-handler
IMPORTANT: There are additional steps required for react-native-gesture-handler
on Android after running react-native link react-native-gesture-handler
. Check the this guide to complete the installation.
The package exports two different navigators:
createBottomTabNavigator
: iOS like bottom tabs.createMaterialTopTabNavigator
: Material design themed top tabs with swipe gesture, from react-native-tab-view.
You can import individual navigators and use them:
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator({
Album: { screen: Album },
Library: { screen: Library },
History: { screen: History },
Cart: { screen: Cart },
});
You can install another package, react-navigation-material-bottom-tabs
, to use a third type of tab navigator:
createMaterialBottomTabNavigator
: Material design themed animated bottom tabs, from react-native-paper.
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
export default createMaterialBottomTabNavigator({
Album: { screen: Album },
Library: { screen: Library },
History: { screen: History },
Cart: { screen: Cart },
}, {
initialRouteName: 'Album',
activeTintColor: '#F44336',
});