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

6.6.14 • Published 9 months ago

Install

Weekly downloads

48,589

License

MIT

Repository

Last release

9 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

9 months ago

9 months ago

10 months ago

11 months ago

11 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

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

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

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

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

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago