Skip to content

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

License

Notifications You must be signed in to change notification settings

sidm033/react-native-paper-tabs

 
 

Repository files navigation

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)

Demo of react-native-paper-tabs

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

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

npm

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

Usage

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

function Example() {
    return (
      <TabsProvider
        defaultIndex={0}
        // onChangeIndex={handleChangeIndex} optional
      >
        <Tabs
          // uppercase={false} // true/false | default=true (on material v2) | 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
          // showLeadingSpace={true} //  (default=true) show leading space in scrollable tabs inside the header
          // disableSwipe={false} // (default=false) disable swipe to left/right gestures
        >
          <TabScreen label="Explore" icon="compass">
             <ExploreWitHookExamples />
          </TabScreen>
          <TabScreen label="Flights" icon="airplane" disabled>
            <View style={{ backgroundColor: 'black', flex:1 }} />
          </TabScreen>
          <TabScreen
            label="Trips"
            icon="bag-suitcase"
            // optional props
            // badge={true} // only show indicator
            // badge="text"
            // badge={1}
            // onPressIn={() => {
            //   console.log('onPressIn explore');
            // }}
            // onPress={() => {
            //   console.log('onPress explore');
            // }}
          >
             <View style={{ backgroundColor: 'red', flex:1 }} />
          </TabScreen>
        </Tabs>
      </TabsProvider>
    )
}

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>
  );
}

Contributing

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

License

MIT

Checkout our other libraries

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 94.2%
  • JavaScript 5.8%