react-navigation/packages/material-top-tabs

@react-navigation/material-top-tabs

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

Documentation can be found on the React Navigation website.

Installation

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

yarn add @react-navigation/native @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.

To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios
pod install
cd ..

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