{"id":3922,"url":"https://github.com/ptomasroos/react-native-scrollable-tab-view","last_synced_at":"2025-04-09T01:21:39.446Z","repository":{"id":39880323,"uuid":"37240232","full_name":"ptomasroos/react-native-scrollable-tab-view","owner":"ptomasroos","description":"Tabbed navigation that you can swipe between, each tab can have  its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar","archived":false,"fork":false,"pushed_at":"2024-06-23T08:18:54.000Z","size":7658,"stargazers_count":6938,"open_issues_count":165,"forks_count":2287,"subscribers_count":140,"default_branch":"master","last_synced_at":"2024-10-29T10:47:42.424Z","etag":null,"topics":["animated","react-native","swipe","tabs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-scrollable-tab-view","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/ptomasroos.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-06-11T05:01:07.000Z","updated_at":"2024-10-27T03:10:09.000Z","dependencies_parsed_at":"2024-08-04T08:01:19.808Z","dependency_job_id":"2fdd218b-0b21-4bda-8400-612d1b8eb658","html_url":"https://github.com/ptomasroos/react-native-scrollable-tab-view","commit_stats":{"total_commits":288,"total_committers":79,"mean_commits":"3.6455696202531644","dds":0.6076388888888888,"last_synced_commit":"583a66f7fd3eb2cac1a05c71d7167d78a8ad9de6"},"previous_names":["brentvatne/react-native-scrollable-tab-view","skv-headless/react-native-scrollable-tab-view"],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptomasroos%2Freact-native-scrollable-tab-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptomasroos%2Freact-native-scrollable-tab-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptomasroos%2Freact-native-scrollable-tab-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ptomasroos%2Freact-native-scrollable-tab-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ptomasroos","download_url":"https://codeload.github.com/ptomasroos/react-native-scrollable-tab-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247953849,"owners_count":21024100,"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":["animated","react-native","swipe","tabs"],"created_at":"2024-01-05T20:16:55.423Z","updated_at":"2025-04-09T01:21:39.424Z","avatar_url":"https://github.com/ptomasroos.png","language":"JavaScript","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","funding_links":[],"categories":["Components","JavaScript","React Native"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptomasroos%2Freact-native-scrollable-tab-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fptomasroos%2Freact-native-scrollable-tab-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fptomasroos%2Freact-native-scrollable-tab-view/lists"}