{"id":24598242,"url":"https://github.com/reactseals/react-native-scrollable-tab-view","last_synced_at":"2025-07-22T06:03:51.364Z","repository":{"id":46919418,"uuid":"211096282","full_name":"reactseals/react-native-scrollable-tab-view","owner":"reactseals","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-21T13:25:42.000Z","size":1208,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T05:32:53.508Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactseals.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T13:29:58.000Z","updated_at":"2019-09-26T13:30:54.000Z","dependencies_parsed_at":"2022-08-29T22:31:24.959Z","dependency_job_id":null,"html_url":"https://github.com/reactseals/react-native-scrollable-tab-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/reactseals/react-native-scrollable-tab-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-tab-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-tab-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-tab-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-tab-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactseals","download_url":"https://codeload.github.com/reactseals/react-native-scrollable-tab-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-scrollable-tab-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266437367,"owners_count":23928232,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2025-01-24T12:15:26.168Z","updated_at":"2025-07-22T06:03:51.104Z","avatar_url":"https://github.com/reactseals.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ScrollView based tab bar navigator working both on Android and iOS with initial page settings and additional tab bar props for reducing fast scrolling stutter\n\n## react-native-scrollable-tab-view\n\n## Basic usage\n\n```javascript\nvar ScrollableTabView = require('react-native-scrollable-tab-view');\n\nvar App = React.createClass({\n  render() {\n    return (\n      \u003cScrollableTabView\u003e\n        \u003cReactPage tabLabel=\"React\" /\u003e\n        \u003cFlowPage tabLabel=\"Flow\" /\u003e\n        \u003cJestPage tabLabel=\"Jest\" /\u003e\n      \u003c/ScrollableTabView\u003e\n    );\n  }\n});\n```\n\n## Injecting a custom tab bar\n\nSuppose we had a custom tab bar called `CustomTabBar`, we would inject\nit into our `ScrollableTabView` like this:\n\n```javascript\nvar ScrollableTabView = require('react-native-scrollable-tab-view');\nvar CustomTabBar = require('./CustomTabBar');\n\nvar App = React.createClass({\n  render() {\n    return (\n      \u003cScrollableTabView renderTabBar={() =\u003e \u003cCustomTabBar someProp={'here'} /\u003e}\u003e\n        \u003cReactPage tabLabel=\"React\" /\u003e\n        \u003cFlowPage tabLabel=\"Flow\" /\u003e\n        \u003cJestPage tabLabel=\"Jest\" /\u003e\n      \u003c/ScrollableTabView\u003e\n    );\n  }\n});\n```\nTo start you can just copy [DefaultTabBar](https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/DefaultTabBar.js).\n\n## Examples\n\n[SimpleExample](https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/Example/SimpleExample.js).\n\n[ScrollableTabsExample](https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/Example/ScrollableTabsExample.js).\n\n[OverlayExample](https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/Example/OverlayExample.js).\n\n[FacebookExample](https://github.com/skv-headless/react-native-scrollable-tab-view/blob/master/Example/FacebookExample.js).\n\n## Props\n\n- **`renderTabBar`** _(Function:ReactComponent)_ - accept 1 argument `props` and should return a component to use as\n  the tab bar. The component has `goToPage`, `tabs`, `activeTab` and\n  `ref` added to the props, and should implement `setAnimationValue` to\n  be able to animate itself along with the tab content. You can manually pass the `props` to the TabBar component.\n- **`tabBarPosition`** _(String)_ Defaults to `\"top\"`.\n  - `\"bottom\"` to position the tab bar below content.\n  - `\"overlayTop\"` or `\"overlayBottom\"` for a semitransparent tab bar that overlays content. Custom tab bars must consume a style prop on their outer element to support this feature: `style={this.props.style}`.\n- **`onChangeTab`** _(Function)_ - function to call when tab changes, should accept 1 argument which is an Object containing two keys: `i`: the index of the tab that is selected, `ref`: the ref of the tab that is selected\n- **`onScroll`** _(Function)_ - function to call when the pages are sliding, should accept 1 argument which is an Float number representing the page position in the slide frame.\n- **`locked`** _(Bool)_ - disables horizontal dragging to scroll between tabs, default is false.\n- **`initialPage`** _(Integer)_ - the index of the initially selected tab, defaults to 0 === first tab.\n- **`page`** _(Integer)_ - set selected tab(can be buggy see  [#126](https://github.com/brentvatne/react-native-scrollable-tab-view/issues/126)\n- **`children`** _(ReactComponents)_ - each top-level child component should have a `tabLabel` prop that can be used by the tab bar component to render out the labels. The default tab bar expects it to be a string, but you can use anything you want if you make a custom tab bar.\n- **`tabBarUnderlineStyle`** _([View.propTypes.style](https://facebook.github.io/react-native/docs/view.html#style))_ - style of the default tab bar's underline.\n- **`tabBarBackgroundColor`** _(String)_ - color of the default tab bar's background, defaults to `white`\n- **`tabBarActiveTextColor`** _(String)_ - color of the default tab bar's text when active, defaults to `navy`\n- **`tabBarInactiveTextColor`** _(String)_ - color of the default tab bar's text when inactive, defaults to `black`\n- **`tabBarTextStyle`** _(Object)_ - Additional styles to the tab bar's text. Example: `{fontFamily: 'Roboto', fontSize: 15}`\n- **`style`** _([View.propTypes.style](https://facebook.github.io/react-native/docs/view.html#style))_\n- **`contentProps`** _(Object)_ - props that are applied to root `ScrollView`/`ViewPagerAndroid`. Note that overriding defaults set by the library may break functionality; see the source for details.\n- **`scrollWithoutAnimation`** _(Bool)_ - on tab press change tab without animation.\n- **`prerenderingSiblingsNumber`** _(Integer)_ - pre-render nearby # sibling, `Infinity` === render all the siblings, default to 0 === render current page.\n\n## Tab bar received props\n\n- **`lastScrollTimestamp`** _(Timestamp)_ - timestamp indicating that user stopped scrolling and scroll momentum has ended. This is useful for displaying active tab without getting chasing animation.\n\n## Contribution\n**Issues** are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.\n\n**Pull requests** are welcome. If you want to change API or making something big better to create issue and discuss it first. Before submiting PR please run ```eslint .``` Also all eslint fixes are welcome.\n\nPlease attach video or gif to PR's and issues it is super helpful.\n\n\u003ca href=\"http://www.abeautifulsite.net/recording-a-screencast-with-quicktime/\" target=\"_blank\"\u003eHow to make video\u003c/a\u003e\n\n\u003ca href=\"https://github.com/jclem/gifify\" target=\"_blank\"\u003eHow to make gif from video\u003c/a\u003e\n\n---\n\n**MIT Licensed**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-scrollable-tab-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactseals%2Freact-native-scrollable-tab-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-scrollable-tab-view/lists"}