sayem314/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-pager-view)
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

Instead of spending all your money on a M1 Mac, give it to us so we can buy one.

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
    >
      <TabScreen label="Explore" icon="compass">
        <ExploreWitHookExamples />
      </TabScreen>
      <TabScreen label="Flights" icon="airplane">
        <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

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

sayem314 / react-native-paper-tabs