shreekunj-patel/react-native-paper-tabs

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

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

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

shreekunj-patel / react-native-paper-tabs