{"id":13776571,"url":"https://github.com/Benjamin-Dobell/react-native-android-slidingtabstrip","last_synced_at":"2025-05-11T10:31:07.214Z","repository":{"id":57335263,"uuid":"61224725","full_name":"Benjamin-Dobell/react-native-android-slidingtabstrip","owner":"Benjamin-Dobell","description":"React Native sliding tab strip implementation for Android. ","archived":false,"fork":false,"pushed_at":"2017-09-18T15:24:12.000Z","size":58,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-21T02:21:34.520Z","etag":null,"topics":[],"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/Benjamin-Dobell.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}},"created_at":"2016-06-15T16:52:16.000Z","updated_at":"2019-01-17T13:58:58.000Z","dependencies_parsed_at":"2022-08-24T21:31:40.713Z","dependency_job_id":null,"html_url":"https://github.com/Benjamin-Dobell/react-native-android-slidingtabstrip","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-slidingtabstrip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-slidingtabstrip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-slidingtabstrip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Benjamin-Dobell%2Freact-native-android-slidingtabstrip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Benjamin-Dobell","download_url":"https://codeload.github.com/Benjamin-Dobell/react-native-android-slidingtabstrip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551599,"owners_count":21926321,"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":[],"created_at":"2024-08-03T18:00:29.187Z","updated_at":"2025-05-11T10:31:06.890Z","avatar_url":"https://github.com/Benjamin-Dobell.png","language":"Java","funding_links":[],"categories":["\u003ca name=\"UI:-Native-Modules\"\u003eUI: Native Modules\u003c/a\u003e"],"sub_categories":[],"readme":"![npm version](https://img.shields.io/npm/v/react-native-android-slidingtabstrip.svg)\n\n# Install\n\nInstall the node module:\n\n    npm install --save react-native-android-slidingtabstrip\n\nThen link the native code into your Android project:\n\n    react-native link\n\n# Usage\n\nThis library provides two views that can be used together with any native Android ViewPager, typically you'll just use the official React Native provided `ViewPagerAndroid`.\n\n## SlidingTabViewPagerAndroid\n\nThis is a wrapper view. You must place inside it a single ViewPager (e.g. `ViewPagerAndroid`) and a single `SlidingTabStripAndroid`.\n\nThis view doesn't do any rendering of its own, it exists purely to create an association between the tab strip and the view pager.\n\n## SlidingTabStripAndroid\n\nThis is your container for your tabs. You can place any views you like within it as children and they will be rendered with a selected tab indicator and tab dividers, both of which can be customised or disabled.\n\n__NOTE__: `SlidingTabStripAndroid` must have the same number of children as the associated view pager.\n\n### Properties\n\n| Property              | Type    | Description                                                                                                                                                                                                                                                                                                                                           |\n| --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| removeClippedSubviews | boolean | Experimental: When true, offscreen child views (whose `overflow` value is `hidden`) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.  __Note__: Inherited behaviour from ScrollView.                                                                  |\n| endFillColor          | color   | Sometimes a sliding tab strip takes up more space than its content fills. When this is the case, this prop will fill the rest of the tab strip with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case.  __Note__: Inherited behaviour from ScrollView. |\n| scrollOffset          | number  | Instead of scrolling exactly to the start of the selected tab, offset the our scroll X by this amount (rounded to the nearest pixel).                                                                                                                                                                                                                 |\n| indicatorHeight       | number  | Height of the selected tab indicator.                                                                                                                                                                                                                                                                                                                 |\n| dividerInset          | number  | Inset the tab dividers from the top and bottom of the view by this amount.                                                                                                                                                                                                                                                                            |\n| dividerWidth          | number  | Width of the tab dividers.                                                                                                                                                                                                                                                                                                                            |\n| indicatorColor        | color   | Color of the selected tab indicator.                                                                                                                                                                                                                                                                                                                  |\n| dividerColor          | color   | Color of the tab dividers.                                                                                                                                                                                                                                                                                                                            |\n\n# Example Usage\n```\n  render() {\n    let tabs = [\n      {\n        title: 'Tab 1',\n        content: 'Hello, World!'\n      },\n      {\n        title: 'Tab 2',\n        content: 'This is a straight-forward sliding tab strip implementation for Android.'\n      },\n      {\n        title: 'Tab 3',\n        content: 'Some content for tab 3.'\n      },\n      {\n        title: 'Tab 4',\n        content: 'Some content for tab 4.'\n      },\n      {\n        title: 'Tab 5',\n        content: 'Some content for tab 5.'\n      },\n      {\n        title: 'Tab 6',\n        content: 'Some content for tab 6.'\n      }\n    ]\n\n    return (\n      \u003cSlidingTabViewPagerAndroid style={{flex: 1}}\u003e\n        \u003cSlidingTabStripAndroid\u003e\n          {tabs.map((tab, index) =\u003e\n            \u003cText key={index} style={{color: '#fff', paddingVertical: 6, paddingHorizontal: 40, fontSize: 22}}\u003e\n              {tab.title}\n            \u003c/Text\u003e\n          )}\n        \u003c/SlidingTabStripAndroid\u003e\n        \u003cViewPagerAndroid style={{flex: 1}}\u003e\n          {tabs.map((tab, index) =\u003e\n            \u003cView style={{flex: 1, justifyContent: 'center', alignItems: 'stretch'}} key={index}\u003e\n              \u003cText key={index} style={{flex: 1, color: '#fff', fontSize: 12, textAlign: 'center', margin: 10}}\u003e\n                {tab.content}\n              \u003c/Text\u003e\n            \u003c/View\u003e\n          )}\n        \u003c/ViewPagerAndroid\u003e\n      \u003c/SlidingTabViewPagerAndroid\u003e\n    )\n  }\n```\n\n### Screenshot\n\n![Screenshot](http://benjamin-dobell.github.io/react-native-android-slidingtabstrip/screenshot.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBenjamin-Dobell%2Freact-native-android-slidingtabstrip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBenjamin-Dobell%2Freact-native-android-slidingtabstrip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBenjamin-Dobell%2Freact-native-android-slidingtabstrip/lists"}