react-native-paper-tabs

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

Stats

StarsIssuesVersionUpdatedCreatedSize
react-native-paper-tabs
2310.6.022 days agoa year agoMinified + gzip package size for react-native-paper-tabs in KB

Readme

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)

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 (
      <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
        // 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">
           <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>
  );
}

Contributing

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

License

MIT

Checkout our other libraries

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.