{"id":19706640,"url":"https://github.com/web-ridge/react-native-paper-tabs","last_synced_at":"2025-05-15T12:02:06.592Z","repository":{"id":39334368,"uuid":"324232432","full_name":"web-ridge/react-native-paper-tabs","owner":"web-ridge","description":"Smooth and fast cross platform Material Design Tabs for React Native Paper","archived":false,"fork":false,"pushed_at":"2025-04-12T11:49:45.000Z","size":166878,"stargazers_count":226,"open_issues_count":10,"forks_count":40,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-12T00:36:00.707Z","etag":null,"topics":["android","icons","material","material-design","material-design-tabs","react","react-native","react-native-paper","tabs","viewpager","web"],"latest_commit_sha":null,"homepage":"https://reactnativepapertabs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/web-ridge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-12-24T20:35:25.000Z","updated_at":"2025-05-10T10:43:27.000Z","dependencies_parsed_at":"2024-01-29T21:43:59.892Z","dependency_job_id":"10e7e98d-5f40-4c91-83c0-50b06d440367","html_url":"https://github.com/web-ridge/react-native-paper-tabs","commit_stats":{"total_commits":79,"total_committers":8,"mean_commits":9.875,"dds":0.2784810126582279,"last_synced_commit":"b94e5324b6e87d2c9ef95e22991d9e0132f09959"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-paper-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-paper-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-paper-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-paper-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-ridge","download_url":"https://codeload.github.com/web-ridge/react-native-paper-tabs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","icons","material","material-design","material-design-tabs","react","react-native","react-native-paper","tabs","viewpager","web"],"created_at":"2024-11-11T21:36:25.196Z","updated_at":"2025-05-15T12:02:01.581Z","avatar_url":"https://github.com/web-ridge.png","language":"TypeScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=7B9KKQLXTEW9Q\u0026source=url"],"categories":["Stale"],"sub_categories":["React Native \u0026 Expo"],"readme":"\u003cimg align=\"left\" width=\"56\" height=\"56\" src=\"https://user-images.githubusercontent.com/6492229/103138418-c9580f00-46d2-11eb-855a-f8b3c9e90ac7.png\"\u003e react-native-paper-tabs\n---\n\u003cbr\u003e\n\u003cp float=\"left\"\u003e\n\u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-native-paper-tabs\" /\u003e\n\u003cimg src=\"https://badgen.net/npm/dy/react-native-paper-tabs\" /\u003e\n\u003cimg src=\"https://badgen.net/npm/types/react-native-paper-tabs\" /\u003e\n\u003cimg src=\"https://badgen.net/npm/license/react-native-paper-tabs\" /\u003e\n\u003cimg src=\"https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=f3f3f3\u0026logoColor=000\" /\u003e\n\u003c/p\u003e\n\n- Smooth and fast cross platform Material Design Tabs for ([react-native-paper](https://callstack.github.io/react-native-paper/))\n- Tested on Android, iOS and the web\n- Simple API\n- Typesafe\n- Scrollable and fixed\n- Leading or top icon\n- Performant\n- Badges\n- Support for Material You\n- Uses native components ([react-native-viewpager](https://github.com/callstack/react-native-viewpager))\n- Great React Native Web support\n- Implements official spec ([material-design-spec](https://material.io/components/tabs#usage))\n\n[![Demo of react-native-paper-tabs](https://user-images.githubusercontent.com/6492229/103141217-cb7d9600-46f1-11eb-8a98-9f233f0b7198.png)](https://www.youtube.com/watch?v=DFZQlT11k58)\n\n[View video on YouTube](https://www.youtube.com/watch?v=DFZQlT11k58)\n\nWeb demo: [reactnativepapertabs.com](http://reactnativepapertabs.com/)\n\n\n## About us\nWe want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.\n\nGive us a follow on Twitter:\n[RichardLindhout](https://twitter.com/RichardLindhout),\n[web_ridge](https://twitter.com/web_ridge)\n\n## Donate\nPlease contribute or donate so we can spend more time on this library.\n\n[Donate with PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=7B9KKQLXTEW9Q\u0026source=url)\n\n\n## Getting started\n\nYarn\n```sh\nyarn add react-native-paper-tabs react-native-pager-view\n```\n\nnpm\n```sh\nnpm install react-native-paper-tabs react-native-pager-view\n```\n\n## Usage\n\n```tsx\nimport {\n  Button,\n  Title,\n  Paragraph,\n} from 'react-native-paper';\nimport {\n  TabsProvider,\n  Tabs,\n  TabScreen,\n  useTabIndex,\n  useTabNavigation,\n} from 'react-native-paper-tabs';\n\nfunction Example() {\n    return (\n      \u003cTabsProvider\n        defaultIndex={0}\n        // onChangeIndex={handleChangeIndex} optional\n      \u003e\n        \u003cTabs\n          // uppercase={false} // true/false | default=true (on material v2) | labels are uppercase\n          // showTextLabel={false} // true/false | default=false (KEEP PROVIDING LABEL WE USE IT AS KEY INTERNALLY + SCREEN READERS)\n          // iconPosition // leading, top | default=leading\n          // style={{ backgroundColor:'#fff' }} // works the same as AppBar in react-native-paper\n          // dark={false} // works the same as AppBar in react-native-paper\n          // theme={} // works the same as AppBar in react-native-paper\n          // mode=\"scrollable\" // fixed, scrollable | default=fixed\n          // showLeadingSpace={true} //  (default=true) show leading space in scrollable tabs inside the header\n          // disableSwipe={false} // (default=false) disable swipe to left/right gestures\n        \u003e\n          \u003cTabScreen label=\"Explore\" icon=\"compass\"\u003e\n             \u003cExploreWitHookExamples /\u003e\n          \u003c/TabScreen\u003e\n          \u003cTabScreen label=\"Flights\" icon=\"airplane\" disabled\u003e\n            \u003cView style={{ backgroundColor: 'black', flex:1 }} /\u003e\n          \u003c/TabScreen\u003e\n          \u003cTabScreen\n            label=\"Trips\"\n            icon=\"bag-suitcase\"\n            // optional props\n            // badge={true} // only show indicator\n            // badge=\"text\"\n            // badge={1}\n            // onPressIn={() =\u003e {\n            //   console.log('onPressIn explore');\n            // }}\n            // onPress={() =\u003e {\n            //   console.log('onPress explore');\n            // }}\n          \u003e\n             \u003cView style={{ backgroundColor: 'red', flex:1 }} /\u003e\n          \u003c/TabScreen\u003e\n        \u003c/Tabs\u003e\n      \u003c/TabsProvider\u003e\n    )\n}\n\nfunction ExploreWitHookExamples() {\n  const goTo = useTabNavigation();\n  const index = useTabIndex();\n  return (\n    \u003cView style={{ flex:1 }}\u003e\n      \u003cTitle\u003eExplore\u003c/Title\u003e\n      \u003cParagraph\u003eIndex: {index}\u003c/Paragraph\u003e\n      \u003cButton onPress={() =\u003e goTo(1)}\u003eGo to Flights\u003c/Button\u003e\n    \u003c/View\u003e\n  );\n}\n\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n\n### Checkout our other libraries\n- Simple cross platform navigation library for React Native (web): [react-native-ridge-navigation](https://github.com/web-ridge/react-native-ridge-navigation)\n- 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))\n- 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)\n- 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)\n- Simple translations in React (Native): [react-ridge-translations](https://github.com/web-ridge/react-ridge-translations)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-paper-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-ridge%2Freact-native-paper-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-paper-tabs/lists"}