react-native-paper-tabs
v0.10.4
Published
Smooth and fast cross platform Material Design Tabs for React Native Paper
Downloads
24,810
Readme
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)
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.
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 {
TabsProvider,
Tabs,
TabScreen,
useTabIndex,
useTabNavigation,
} from 'react-native-paper-tabs';
function Example() {
return (
<TabsProvider
defaultIndex={0}
// onChangeIndex={handleChangeIndex} optional
>
<Tabs
// 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
>
<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
// badge={true} // only show indicator
// badge="text"
// badge={1}
// onPressIn={() => {
// console.log('onPressIn explore');
// }}
// onPress={() => {
// console.log('onPress explore');
// }}
>
<View style={{ backgroundColor: 'red', flex:1 }} />
</TabScreen>
</Tabs>
</TabsProvider>
)
}
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 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