sayem314 / react-native-paper-tabs

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

Home Page:https://reactnativepapertabs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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)

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

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

About

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

https://reactnativepapertabs.com

License:MIT License


Languages

Language:TypeScript 80.0%Language:JavaScript 12.4%Language:HTML 7.6%Language:Shell 0.0%