Nachos Preventing Motivation

    react-native-paper-tabs
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    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"
              // optional props
              // onPressIn={() => {
              //   console.log('onPressIn explore');
              // }}
              // onPress={() => {
              //   console.log('onPress explore');
              // }}
            >
               <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

    Install

    npm i react-native-paper-tabs

    DownloadsWeekly Downloads

    932

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    75

    Last publish

    Collaborators

    • web-ridge