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

Contributing

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

License

MIT

Checkout our other libraries

• Simple cross platform navigation library for React Native (web): react-native-ridge-navigation
• Simple form library for React Native with great UX for developer and end-user: react-native-use-form
• Smooth and fast cross platform Material Design date and time picker for React Native Paper: react-native-paper-dates
• Smooth and fast cross platform Material Design Tabs for React Native Paper: react-native-paper-tabs
• Simple translations in React (Native): react-ridge-translations