This package has been moved to https://github.com/react-navigation/react-navigation/tree/4.x

Build Status Version MIT License

Tab navigators for React Navigation.

Follow the instructions on the the React Navigation "Getting Started" guide, and then add the react-navigation-tabs package to your project.

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

To setup the development environment, open a Terminal in the repo directory and run the following:

yarn bootstrap

While developing, you can run the example app with Expo to test your changes:

yarn example start

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

• createBottomTabNavigator
• createMaterialTopTabNavigator