@react-navigation/material-top-tabs v6.6.14
@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>
);
}
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