Smooth and fast cross platform Material Design Tabs for React Native Paper

Description:

Create smooth and fast cross platform Material Design Tabs for React Native Paper using react-native-paper-tabs component very easily.

Basic Features:

It is smooth and fast cross platform Material Design Tabs for React Native Paper.It is tested on Android, iOS and the web.Simple API to use.Typesafe.Its scrollable and fixed.It supports Leading or top icon.Performant.It does Uses native components.Good React Native Web support.

How can I use it?

First, install this component as following via Yarn.

yarn add react-native-paper-tabs react-native-pager-view

Or you may install it via npm.

npm install react-native-paper-tabs react-native-pager-view

Then, import required components.

import {
Button,
Title,
Paragraph,
} from ‘react-native-paper’;
import {
Tabs,
TabScreen,
useTabIndex,
useTabNavigation,
} from ‘react-native-paper-tabs’;

To create basic material design tabs, write your code as following.

function Example() {
return (
<Tabs
// defaultIndex={0} // default = 0
// uppercase={false} // true/false | default=true | labels are uppercase
// showTextLabel={false} // true/false | default=false (KEEP PROVIDING LABEL WE USE IT AS KEY INTERNALLY + SCREEN READERS)
// iconPosition // leading, top | default=leading
// style={{ backgroundColor:’#fff’ }} // works the same as AppBar in react-native-paper
// dark={false} // works the same as AppBar in react-native-paper
// theme={} // works the same as AppBar in react-native-paper
// mode=”scrollable” // fixed, scrollable | default=fixed
// onChangeIndex={(newIndex) => {}} // react on index change
// showLeadingSpace={true} // (default=true) show leading space in scrollable tabs inside the header
>
<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>
);
}

The post Smooth and fast cross platform Material Design Tabs for React Native Paper appeared first on Lipku.com.