{"id":18783565,"url":"https://github.com/sticknet/react-native-scrollable-tab-view","last_synced_at":"2025-12-20T17:30:21.047Z","repository":{"id":57700426,"uuid":"501289374","full_name":"sticknet/react-native-scrollable-tab-view","owner":"sticknet","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-08T14:37:17.000Z","size":106,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-30T00:36:11.548Z","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/sticknet.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":"2022-06-08T14:36:54.000Z","updated_at":"2022-06-08T14:37:21.000Z","dependencies_parsed_at":"2022-09-26T21:10:54.045Z","dependency_job_id":null,"html_url":"https://github.com/sticknet/react-native-scrollable-tab-view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sticknet%2Freact-native-scrollable-tab-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sticknet%2Freact-native-scrollable-tab-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sticknet%2Freact-native-scrollable-tab-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sticknet%2Freact-native-scrollable-tab-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sticknet","download_url":"https://codeload.github.com/sticknet/react-native-scrollable-tab-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239699579,"owners_count":19682574,"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-11-07T20:39:46.723Z","updated_at":"2025-12-20T17:30:20.965Z","avatar_url":"https://github.com/sticknet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## react-native-scrollable-tab-view\n[![npm version](https://badge.fury.io/js/react-native-scrollable-tab-view.svg)](https://badge.fury.io/js/react-native-scrollable-tab-view)\n\nThis is probably my favorite navigation pattern on Android, I wish it\nwere more common on iOS! This is a very simple JavaScript-only\nimplementation of it for React Native. For more information about how\nthe animations behind this work, check out the Rebound section of the\n[React Native Animation Guide](https://facebook.github.io/react-native/docs/animations.html)\n\n\n## Add it to your project\n\n1. Run `npm install react-native-scrollable-tab-view --save`\n2. `var ScrollableTabView = require('react-native-scrollable-tab-view');`\n\n## Demo\n\u003ca href=\"https://appetize.io/embed/6qfv7eydjtm34mhn6qwj2nt3xm?embed=true\u0026screenOnly=false\u0026xdocMsg=true\u0026debug=true\u0026scale=100\u0026deviceColor=black\u0026orientation=portrait\u0026device=iphone6s\u0026osVersion=9.3\u0026deviceId=RGV2aWNlOjU2Y2FjNTExZWQwOTM2MTEwMGRhYTNlNg\u0026platform=ios\u0026width=375\u0026height=668\u0026phoneWidth=416\u0026phoneHeight=870\u0026screenOffsetLeft=21\u0026screenOffsetTop=100\u0026params=%7B%7D\" target=\"_blank\"\u003e\u003cstrong\u003eRun this example\u003c/strong\u003e\u003c/a\u003e\n\n\u003ca href=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo.gif\" width=\"350\"\u003e\u003c/a\u003e\n\u003ca href=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo-fb.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo-fb.gif\" width=\"350\"\u003e\u003c/a\u003e\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## 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%2Fsticknet%2Freact-native-scrollable-tab-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsticknet%2Freact-native-scrollable-tab-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsticknet%2Freact-native-scrollable-tab-view/lists"}