react-navigation-tabs

Tab navigators for React Navigation

Showing:

Popularity

Downloads/wk

73.1K

GitHub Stars

326

Maintenance

Last Commit

2yrs ago

Contributors

22

Package

Dependencies

4

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

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


React Navigation Tabs

Build Status Version MIT License

Tab navigators for React Navigation.

Installation

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

Usage

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

Development workflow

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

Docs

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Quentin Caron1 Rating0 Reviews
December 1, 2020

Tutorials

No tutorials found
Add a tutorial