Smooth and fast cross platform Material Design Tabs for React Native Paper.
1. Installation.
# Yarn
$ yarn add react-native-paper-tabs @react-native-community/viewpager
# NPM
$ npm i react-native-paper-tabs @react-native-community/viewpager
2. Import necessary components.import {
Button,
Title,
Paragraph,
} from 'react-native-paper';
import {
Tabs,
TabScreen,
useTabIndex,
useTabNavigation,
} from 'react-native-paper-tabs';
3. Create a basic Material Design Tabs component.
function Example() {
return (
<Tabs
// options here
>
<TabScreen label="Explore" icon="compass">
<ExploreWitHookExamples />
</TabScreen>
<TabScreen label="Flights" icon="airplane">
<View style={{ backgroundColor: 'black', flex:1 }} />
</TabScreen>
<TabScreen label="Trips" icon="bag-suitcase">
<View style={{ backgroundColor: 'red', flex:1 }} />
</TabScreen>
</Tabs>
)
}
function ExploreWitHookExamples() {
const goTo = useTabNavigation();
const index = useTabIndex();
return (
<View style={{ flex:1 }}>
<Title>Explore</Title>
<Paragraph>Index: {index}</Paragraph>
<Button onPress={() => goTo(1)}>Go to Flights</Button>
</View>
);
}
Author: web-ridge
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/web-ridge/react-native-paper-tabs
License: MIT