Tab navigators for React Navigation.

Open a Terminal in the project root and run:

yarn add react-navigation-tabs

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', });