{"id":13776544,"url":"https://github.com/madhu314/react-native-tabbed-view-pager-android","last_synced_at":"2025-04-26T12:29:36.999Z","repository":{"id":65485734,"uuid":"84411513","full_name":"madhu314/react-native-tabbed-view-pager-android","owner":"madhu314","description":"A React Native component for android view pager with tabs.","archived":false,"fork":false,"pushed_at":"2023-02-27T17:54:58.000Z","size":858,"stargazers_count":44,"open_issues_count":8,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T10:34:18.497Z","etag":null,"topics":["android","pager","pager-android","react-native"],"latest_commit_sha":null,"homepage":null,"language":"Java","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/madhu314.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-09T07:25:56.000Z","updated_at":"2024-10-10T14:15:36.000Z","dependencies_parsed_at":"2024-01-13T07:24:15.394Z","dependency_job_id":"815ba609-eeb0-472a-9f5c-200b628fc268","html_url":"https://github.com/madhu314/react-native-tabbed-view-pager-android","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhu314%2Freact-native-tabbed-view-pager-android","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhu314%2Freact-native-tabbed-view-pager-android/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhu314%2Freact-native-tabbed-view-pager-android/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madhu314%2Freact-native-tabbed-view-pager-android/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madhu314","download_url":"https://codeload.github.com/madhu314/react-native-tabbed-view-pager-android/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250976118,"owners_count":21516878,"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","pager","pager-android","react-native"],"created_at":"2024-08-03T18:00:28.583Z","updated_at":"2025-04-26T12:29:36.979Z","avatar_url":"https://github.com/madhu314.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e"],"sub_categories":[],"readme":"\n# react-native-tabbed-view-pager-android\n![alt tag](https://github.com/madhu314/react-native-tabbed-view-pager-android/blob/master/assets/tabbedviewpager.gif)\n## Getting started\n\n`$ npm install react-native-tabbed-view-pager-android --save`\n\n### Mostly automatic installation\n\n`$ react-native link react-native-tabbed-view-pager-android`\n\n### Manual installation\n\n\n#### iOS\nNot Supported.\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import is.uncommon.rn.widgets.TabbedViewPagerAndroidPackage;` to the imports at the top of the file\n  - Add `new TabbedViewPagerAndroidPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-tabbed-view-pager-android'\n  \tproject(':react-native-tabbed-view-pager-android').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-tabbed-view-pager-android/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-tabbed-view-pager-android')\n  \t```\n\n#### Windows\nNot Supported.\n\n## Usage\n```javascript\nimport TabbedViewPager from 'react-native-tabbed-view-pager-android';\n\n\u003cTabbedViewPager\n      tabMode={\"scrollable\"}\n      tabGravity={\"center\"}\n      tabBackground={\"#008B7D\"}\n      tabIndicatorColor={\"#FFB90B\"}\n      tabIndicatorHeight={4}\n      tabTextColor={\"#ffffffa0\"}\n      tabSelectedTextColor={\"#ffffff\"}\n      tabElevation={4}\n      tabNames={this.state.tabNames}\n      style={styles.viewPager}\n      initialPage={0}\n      onPageSelected={(event) =\u003e this.onPageSelected(event.nativeEvent.position)}\n      onPageScrollStateChanged={(state) =\u003e this.onPageScrollStateChanged(state)}\n      onPageScroll={(event) =\u003e this.onPageScroll(event.nativeEvent)}\u003e\n      {\n        this.state.tabNames.map((tabName) =\u003e {\n          return(\n            \u003cView style={styles.pageStyle} key={tabName}\u003e\n              \u003cText\u003e{tabName}\u003c/Text\u003e\n            \u003c/View\u003e\n          )\n        })\n      }\n    \u003c/TabbedViewPager\u003e\n```\nAll props of [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html) are supported. Following table shows tab props supported by this component.\n\nProp                | Type    | Default | Optional | Explanation\n---                 | ---     | --- | --- |---\ntabMode                | string  | `scrollable`| Yes. | Either `fixed` or `scrollable`.\ntabGravity                | string  | `fill`| Yes. |  Either `center` or `fill`.\ntabBackground                | string  | App theme| Yes. |  Entire tab layout background color. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).\ntabIndicatorColor                | string  | App theme| Yes. |  Selected tab indicator color. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).\ntabIndicatorHeight | number | App theme| Yes. | Selected tab indicator height. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).\ntabTextColor | string | App theme | Yes. |  Color of the text in the normal/unselected tab. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).\ntabSelectedTextColor | string | App theme | Yes. |  Color of the text in the selected tab. Specify in [CSS color format](https://facebook.github.io/react-native/docs/colors.html).\ntabElevation | number | 0 | Yes. |  Elevation of the tab layout. Default value is 0.\ntabNames | array | None | No. |  A string array of tab names. Non optional prop. Should indicate names in the same order as views of view pager children.\n\nLook at `Example` included with this sample for further details.\n\n\n  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhu314%2Freact-native-tabbed-view-pager-android","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadhu314%2Freact-native-tabbed-view-pager-android","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhu314%2Freact-native-tabbed-view-pager-android/lists"}