@react-navigation/material-top-tabs NPM | npm.io

6.6.14 • Published 8 months ago

Install

Weekly downloads

48,589

License

MIT

Repository

Last release

8 months ago

`@react-navigation/material-top-tabs`

React Navigation integration for animated tab view component from react-native-tab-view.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/core @react-navigation/material-top-tabs react-native-tab-view

Now we need to install react-native-gesture-handler and react-native-reanimated.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-gesture-handler react-native-reanimated

If you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler

If you are using Expo, you are done. Otherwise, continue to the next steps.

Next, we need to link these libraries. The steps depends on your React Native version:

React Native 0.60 and higher
On newer versions of React Native, linking is automatic.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:
```
cd ios
pod install
cd ..
```
React Native 0.59
If you're on an older React Native version, you need to manually link the dependencies. To do that, run:
```
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 linking (for all React Native versions). Check the this guide to complete the installation.

Usage

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const MaterialTopTabs = createMaterialTopTabNavigator();

export default function App() {
  return (
    <MaterialTopTabs.Navigator>
      <MaterialTopTabs.Screen
        name="article"
        component={Article}
        options={{ tabBarLabel: 'Article' }}
      />
      <MaterialTopTabs.Screen
        name="chat"
        component={Chat}
        options={{ tabBarLabel: 'Chat' }}
      />
      <MaterialTopTabs.Screen
        name="contacts"
        component={Contacts}
        options={{ tabBarLabel: 'Contacts' }}
      />
    </MaterialTopTabs.Navigator>
  );
}

react-native-component react-component react-native react-navigation ios android material tab

@react-navigation/elements color react-native-tab-view

slashbracket-custom-expo-bare-template hotqa-sdk airasia1222 jitsi-meet-rn react-native-jitsi-meet-lib ki-smart-base-rn @infinitebrahmanuniverse/nolb-_react-n @everything-registry/sub-chunk-766 dsaas-react-native-demo @snapbot-app/examples @snapbot-app/time-ruler wl-ui-component stoner-design-system stablex-sdk bp-native-templates @bluebase/components @bluebase/plugin-react-navigation everest-native-shell jitsi-meet-stepup jitsi-fmtech ipanel-rnapp-ajb-core ipanel-rntv-core sosapp @bacons/expo-router-top-tabs @chunghieu/react-native-msb-travel @aakatrov/jitsi-react-native-sdk yes-framework @functionland/component-library @functionland/fx-components @mainamiru/expo-app-with-navigation @nareshj7/expo-router-v3-top-tabs @mcplabs/mcp-rn-showtime-template @kafudev/react-native-core @jitsi/react-native-sdk @jabz/react-library-template @jabz/react-native-expo-core-system @portkey/react-native-sdk @reactseals/renative-template-chat @rndm/render-plugin-react-navigation @renkiari/e8-react-native-sdk @selene-wallet/app native-solid mz-mobile-ui-kit ownhim react-native-jitsi-meet-sdk-fmtech react-native-liveplayer react-native-sdk-beta react-native-nano rn-navigation-templates rnshell react-native-msb-travel react-native-matirial-ui-v2 react-native-sdk-delta react-native-sdk-stepup react-native-sdk-v2 react-native-sdk-fmtech react-native-sdk-meta react-native-sdk-portkey react-native-vnlink-sdk quytemplate rne-at rntyped-firebase-template react-native-template-expo-basic likeminds_chat_reactnative_integration_beta klarify-ui-components @typeskill/debugger abc123efgh chat-rn-core-beta code-vortex create-rn-redux-toolkit-boilerplate create-themed-react-native-app blueko butce-asistanim ep-native-templates expo-router-v3-top-tabs expo-custom-navigation expo-app findme-forms @steroidsjs/native @snapbox/mapp-examples @snapbox/mapp-green-energy-reaper @snapbox/mapp-led-danmaku @snapbox/mapp-little-days @snapbox/mapp-qrcode-generator @snapbox/mapp-scanner

8 months ago

9 months ago

9 months ago

10 months ago

10 months ago

12 months ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago