Nesting Penguins Molt

    react-navigation-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    2.11.2 • Public • Published

    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

    Install

    npm i react-navigation-tabs

    DownloadsWeekly Downloads

    61,716

    Version

    2.11.2

    License

    MIT

    Unpacked Size

    330 kB

    Total Files

    63

    Last publish

    Collaborators

    • ericvicenti
    • brentvatne
    • satya164
    • osdnk