Explore

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
- Badges
- Support for Material You
- Uses native components (react-native-viewpager)
- Great React Native Web support
- Implements official spec (material-design-spec)

![Demo of react-native-paper-tabs](https://www.youtube.com/watch?v=DFZQlT11k58)

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
``sh yarn add react-native-paper-tabs react-native-pager-view`

npm`sh npm install react-native-paper-tabs react-native-pager-view`

`Usage`

`tsx import { Button, Title, Paragraph, } from 'react-native-paper'; import { TabsProvider, Tabs, TabScreen, useTabIndex, useTabNavigation, } from 'react-native-paper-tabs';

function Example() { return ( defaultIndex={0} // onChangeIndex={handleChangeIndex} optional > // uppercase={false} // true/false | default=true (on material v2) | 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 // showLeadingSpace={true} // (default=true) show leading space in scrollable tabs inside the header // disableSwipe={false} // (default=false) disable swipe to left/right gestures // tabHeaderStyle // style object, can be animated properties as well in // tabLabelStyle // style object > label="Trips" icon="bag-suitcase" // optional props // badge={true} // only show indicator // badge="text" // badge={1} // onPressIn={() => { // console.log('onPressIn explore'); // }} // onPress={() => { // console.log('onPress explore'); // }} > ) }

function ExploreWitHookExamples() { const goTo = useTabNavigation(); const index = useTabIndex(); return ( Explore Index: {index} ); }

Contributing

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

License

MIT

$3

- Simple cross platform navigation library for React Native (web): react-native-ridge-navigation
- Simple form library for React Native with great UX for developer and end-user: react-native-use-form)
- Smooth and fast cross platform Material Design date and time picker for React Native Paper: react-native-paper-dates
- Smooth and fast cross platform Material Design Tabs for React Native Paper: react-native-paper-tabs
- Simple translations in React (Native): react-ridge-translations

Usage

tsx
import {
  Button,
  Title,
  Paragraph,
} from 'react-native-paper';
import {
  TabsProvider,
  Tabs,
  TabScreen,
  useTabIndex,
  useTabNavigation,
} from 'react-native-paper-tabs';

function Example() {
    return (
              defaultIndex={0}
        // onChangeIndex={handleChangeIndex} optional
      >
                  // uppercase={false} // true/false | default=true (on material v2) | 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
          // showLeadingSpace={true} //  (default=true) show leading space in scrollable tabs inside the header
          // disableSwipe={false} // (default=false) disable swipe to left/right gestures
          // tabHeaderStyle // style object, can be animated properties as well in
          // tabLabelStyle // style object
        >
          
             
          
          
            
          
                      label="Trips"
            icon="bag-suitcase"
            // optional props
            // badge={true} // only show indicator
            // badge="text"
            // badge={1}
            // onPressIn={() => {
            //   console.log('onPressIn explore');
            // }}
            // onPress={() => {
            //   console.log('onPress explore');
            // }}
          >
             
          
        
      
    )
}

function ExploreWitHookExamples() {
  const goTo = useTabNavigation();
  const index = useTabIndex();
  return (
    
      Explore
      Index: {index}
      
    
  );
}