https://github.com/web-ridge/react-native-paper-tabs
Smooth and fast cross platform Material Design Tabs for React Native Paper
https://github.com/web-ridge/react-native-paper-tabs
android icons material material-design material-design-tabs react react-native react-native-paper tabs viewpager web
Last synced: 9 days ago
JSON representation
Smooth and fast cross platform Material Design Tabs for React Native Paper
- Host: GitHub
- URL: https://github.com/web-ridge/react-native-paper-tabs
- Owner: web-ridge
- License: mit
- Created: 2020-12-24T20:35:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-12T11:49:45.000Z (about 1 month ago)
- Last Synced: 2025-05-12T00:36:00.707Z (12 days ago)
- Topics: android, icons, material, material-design, material-design-tabs, react, react-native, react-native-paper, tabs, viewpager, web
- Language: TypeScript
- Homepage: https://reactnativepapertabs.com
- Size: 159 MB
- Stars: 226
- Watchers: 3
- Forks: 40
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
react-native-paper-tabs
---
- Smooth and fast cross platform Material Design Tabs for ([react-native-paper](https://callstack.github.io/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](https://github.com/callstack/react-native-viewpager))
- Great React Native Web support
- Implements official spec ([material-design-spec](https://material.io/components/tabs#usage))
[](https://www.youtube.com/watch?v=DFZQlT11k58)
[View video on YouTube](https://www.youtube.com/watch?v=DFZQlT11k58)
Web demo: [reactnativepapertabs.com](http://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](https://twitter.com/RichardLindhout),
[web_ridge](https://twitter.com/web_ridge)
## Donate
Please contribute or donate so we can spend more time on this library.
[Donate with PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7B9KKQLXTEW9Q&source=url)
## 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 (
{
// console.log('onPressIn explore');
// }}
// onPress={() => {
// console.log('onPress explore');
// }}
>
)
}
function ExploreWitHookExamples() {
const goTo = useTabNavigation();
const index = useTabIndex();
return (
Explore
Index: {index}
goTo(1)}>Go to Flights
);
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) 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](https://github.com/web-ridge/react-native-ridge-navigation)
- Simple form library for React Native with great UX for developer and end-user: [react-native-use-form]([https://github.com/web-ridge/react-native-ridge-navigation](https://github.com/web-ridge/react-native-use-form))
- Smooth and fast cross platform Material Design date and time picker for React Native Paper: [react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
- Smooth and fast cross platform Material Design Tabs for React Native Paper: [react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
- Simple translations in React (Native): [react-ridge-translations](https://github.com/web-ridge/react-ridge-translations)