react-native-paper-tabs

• Smooth and fast cross platform Material Design Tabs for (react-native-paper)
• Tested on Android, iOS and the web
• Simple API
• Typesafe
• Scrollable and fixed
• Leading or top icon
• Performant
• Uses native components (react-native-viewpager)
• Great React Native Web support
• Implements official spec (material-design-spec)

View video on YouTube

Web demo: reactnativepapertabs.com

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.

Give us a follow on Twitter: RichardLindhout, web_ridge

Donate

Please contribute or donate so we can spend more time on this library.

Donate with PayPal

Getting started

Yarn

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

npm

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

Usage

1import {
2  Button,
3  Title,
4  Paragraph,
5} from 'react-native-paper';
6import {
7  Tabs,
8  TabScreen,
9  useTabIndex,
10  useTabNavigation,
11} from 'react-native-paper-tabs';
12
13function Example() {
14    return (
15      <Tabs
16        // defaultIndex={0} // default = 0
17        // uppercase={false} // true/false | default=true | labels are uppercase
18        // showTextLabel={false} // true/false | default=false (KEEP PROVIDING LABEL WE USE IT AS KEY INTERNALLY + SCREEN READERS)
19        // iconPosition // leading, top | default=leading
20        // style={{ backgroundColor:'#fff' }} // works the same as AppBar in react-native-paper
21        // dark={false} // works the same as AppBar in react-native-paper
22        // theme={} // works the same as AppBar in react-native-paper
23        // mode="scrollable" // fixed, scrollable | default=fixed
24        // onChangeIndex={(newIndex) => {}} // react on index change
25        // showLeadingSpace={true} //  (default=true) show leading space in scrollable tabs inside the header
26        // disableSwipe={false} // (default=false) disable swipe to left/right gestures
27      >
28        <TabScreen label="Explore" icon="compass">
29           <ExploreWitHookExamples />
30        </TabScreen>
31        <TabScreen label="Flights" icon="airplane" disabled>
32          <View style={{ backgroundColor: 'black', flex:1 }} />
33        </TabScreen>
34        <TabScreen
35          label="Trips"
36          icon="bag-suitcase"
37          // optional props
38          // onPressIn={() => {
39          //   console.log('onPressIn explore');
40          // }}
41          // onPress={() => {
42          //   console.log('onPress explore');
43          // }}
44        >
45           <View style={{ backgroundColor: 'red', flex:1 }} />
46        </TabScreen>
47      </Tabs>
48    )
49}
50
51function ExploreWitHookExamples() {
52  const goTo = useTabNavigation();
53  const index = useTabIndex();
54  return (
55    <View style={{ flex:1 }}>
56      <Title>Explore</Title>
57      <Paragraph>Index: {index}</Paragraph>
58      <Button onPress={() => goTo(1)}>Go to Flights</Button>
59    </View>
60  );
61}
62

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Checkout our other libraries

• Simple form library for React Native with great UX for developer and end-user react-native-use-form
• Date and Time picker for React Native Paper: react-native-paper-dates
• Simple translations in React (Native): react-ridge-translations
• Simple global state management in React (Native): react-ridge-state
• 1 command utility for React Native (Web) project: create-react-native-web-application