Gathering detailed insights and metrics for react-native-paper-tabs-mod
Gathering detailed insights and metrics for react-native-paper-tabs-mod
Smooth and fast cross platform Material Design Tabs for React Native Paper
Installations
npm install react-native-paper-tabs-modDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
14.16.0
NPM Version
7.17.0
Releases
30
Languages
2
TypeScript
JavaScript
TypeScript (97.24%)
JavaScript (2.76%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
232 Stars
117 Commits
40 Forks
3 Watchers
1 Branches
9 Contributors
Updated on Jul 11, 2025
Maintainers
1
Package Meta Information
Latest Version
0.4.2
Package Id
react-native-paper-tabs-mod@0.4.2
Unpacked Size
206.14 kB
Size
37.58 kB
File Count
75
NPM Version
7.17.0
Node Version
14.16.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
5
Dev Dependencies
28
@commitlint/config-conventional@react-native-community/eslint-config@release-it/conventional-changelog@types/color@types/jest@types/react@types/react-native@types/react-native-vector-iconscolorcommitlintdotenv-clieslinteslint-config-prettiereslint-plugin-prettierexpo-fonthuskyjestpod-installprettierreactreact-nativereact-native-builder-bobreact-native-pager-viewreact-native-paperreact-native-unimodulesreact-native-vector-iconsrelease-ittypescript
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-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
1yarn add react-native-paper-tabs react-native-pager-view
npm
1npm install react-native-paper-tabs react-native-pager-view
Usage
1import { 2 Button, 3 Title, 4 Paragraph, 5} from 'react-native-paper'; 6import { 7 Tabs, 8 TabScreen, 9 useTabIndex, 10 useTabNavigation, 11} from 'react-native-paper-tabs'; 12 13function Example() { 14 return ( 15 <Tabs 16 // defaultIndex={0} // default = 0 17 // uppercase={false} // true/false | default=true | labels are uppercase 18 // showTextLabel={false} // true/false | default=false (KEEP PROVIDING LABEL WE USE IT AS KEY INTERNALLY + SCREEN READERS) 19 // iconPosition // leading, top | default=leading 20 // style={{ backgroundColor:'#fff' }} // works the same as AppBar in react-native-paper 21 // dark={false} // works the same as AppBar in react-native-paper 22 // theme={} // works the same as AppBar in react-native-paper 23 // mode="scrollable" // fixed, scrollable | default=fixed 24 // onChangeIndex={(newIndex) => {}} // react on index change 25 // showLeadingSpace={true} // (default=true) show leading space in scrollable tabs inside the header 26 > 27 <TabScreen label="Explore" icon="compass"> 28 <ExploreWitHookExamples /> 29 </TabScreen> 30 <TabScreen label="Flights" icon="airplane"> 31 <View style={{ backgroundColor: 'black', flex:1 }} /> 32 </TabScreen> 33 <TabScreen label="Trips" icon="bag-suitcase"> 34 <View style={{ backgroundColor: 'red', flex:1 }} /> 35 </TabScreen> 36 </Tabs> 37 ) 38} 39 40function ExploreWitHookExamples() { 41 const goTo = useTabNavigation(); 42 const index = useTabIndex(); 43 return ( 44 <View style={{ flex:1 }}> 45 <Title>Explore</Title> 46 <Paragraph>Index: {index}</Paragraph> 47 <Button onPress={() => goTo(1)}>Go to Flights</Button> 48 </View> 49 ); 50} 51
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Checkout our other libraries
- Date and Time picker for React Native Paper: react-native-paper-dates
- Simple translations in React (Native): react-ridge-translations
- Simple global state management in React (Native): react-ridge-state
- 1 command utility for React Native (Web) project: create-react-native-web-application
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
7 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 6
Reason
Found 4/26 approved changesets -- score normalized to 1
Reason
9 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-x4c5-c7rf-jjgv
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7
- Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975
- Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 8 are checked with a SAST tool
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:134: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:146: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:164: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:171: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-paper-tabs/ci.yml/main?enable=pin
- Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
Score
3.2
/10
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More