{"_id":"@tommasini/react-native-scrollable-tab-view","_rev":"3-6f80e3acbeb1badd6d81bda1c7d0fc8e","name":"@tommasini/react-native-scrollable-tab-view","dist-tags":{"latest":"1.1.2"},"versions":{"1.1.0":{"name":"@tommasini/react-native-scrollable-tab-view","version":"1.1.0","keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"author":{"name":"Brent Vatne"},"license":"MIT","_id":"@tommasini/react-native-scrollable-tab-view@1.1.0","maintainers":[{"name":"tommasini","email":"tommasini15@gmail.com"}],"homepage":"https://github.com/brentvatne/react-native-scrollable-tab-view#readme","bugs":{"url":"https://github.com/brentvatne/react-native-scrollable-tab-view/issues"},"dist":{"shasum":"e1cd65845598ffb0bb75b4ebbb8cdee7acdc1c7a","tarball":"https://registry.npmjs.org/@tommasini/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-1.1.0.tgz","fileCount":10,"integrity":"sha512-lEED5awh+KR89IEVC4w5upz1QFadhj6D931wYe/1hLzSTtO7YmNHXWgKON7kzDXMBVVyRRNtQ53kpwjuXaUdOg==","signatures":[{"sig":"MEYCIQDHqRs3TXJ5y/vOY9yVwy+D+uHmfmPsURirkB1ipqLvBAIhAI/5hQjxdFphnLia9JCmiK3AgGen77bwAVrz033/miTS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42599},"main":"index.js","gitHead":"1f3455141f552e44fcf7fa1198078090d7013537","scripts":{"lint":"eslint -c .eslintrc . --ignore-path .gitignore","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"tommasini","email":"tommasini15@gmail.com"},"repository":{"url":"git+https://github.com/brentvatne/react-native-scrollable-tab-view.git","type":"git"},"_npmVersion":"10.8.2","description":"This is a fork of react-native-scrollable-tab-view","directories":{},"_nodeVersion":"20.18.0","dependencies":{"prop-types":"^15.6.0","react-timer-mixin":"^0.13.3","create-react-class":"^15.6.2","@react-native-community/viewpager":"3.3.0","deprecated-react-native-prop-types":"^2.3.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^3.1.1","babel-eslint":"^6.1.2"},"peerDependencies":{"react-native":">=0.20.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-scrollable-tab-view_1.1.0_1758210339234_0.5531555877493999","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@tommasini/react-native-scrollable-tab-view","version":"1.1.1","keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"author":{"name":"tommasini"},"license":"MIT","_id":"@tommasini/react-native-scrollable-tab-view@1.1.1","maintainers":[{"name":"tommasini","email":"tommasini15@gmail.com"}],"homepage":"https://github.com/brentvatne/react-native-scrollable-tab-view#readme","bugs":{"url":"https://github.com/brentvatne/react-native-scrollable-tab-view/issues"},"dist":{"shasum":"e113b88d1e41ebe3b2fea0f7d54953a13fe2fcb3","tarball":"https://registry.npmjs.org/@tommasini/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-1.1.1.tgz","fileCount":10,"integrity":"sha512-Z8exXcJs047WXdWuZm9HPWaiZjrE/icrwBfnQY6eOGU194/sZt6CNvArGkcbbAm/E5E+kTnHXPoMJqSwi3KFew==","signatures":[{"sig":"MEUCIQD/FdsIyzrIuHPRXDvzPqLCCD9vnioZXYBZ+GNKG9IAvQIgM9cFz97aVT42ZC2HZWFqPqH0WXWlRs1ag5pcC47hNSQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42597},"main":"index.js","gitHead":"1ccd52610e05b24c2c49c55893996756c0eaf7f8","scripts":{"lint":"eslint -c .eslintrc . --ignore-path .gitignore","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"tommasini","email":"tommasini15@gmail.com"},"repository":{"url":"git+https://github.com/brentvatne/react-native-scrollable-tab-view.git","type":"git"},"_npmVersion":"10.8.2","description":"This is a fork of react-native-scrollable-tab-view","directories":{},"_nodeVersion":"20.18.0","dependencies":{"prop-types":"^15.6.0","react-timer-mixin":"^0.13.3","create-react-class":"^15.6.2","@react-native-community/viewpager":"3.3.0","deprecated-react-native-prop-types":"^2.3.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^3.1.1","babel-eslint":"^6.1.2"},"peerDependencies":{"react-native":">=0.20.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-scrollable-tab-view_1.1.1_1758211049675_0.33382707629663955","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@tommasini/react-native-scrollable-tab-view","version":"1.1.2","description":"This is a fork of react-native-scrollable-tab-view","main":"index.js","types":"index.d.ts","scripts":{"lint":"eslint -c .eslintrc . --ignore-path .gitignore","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/brentvatne/react-native-scrollable-tab-view.git"},"keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"author":{"name":"tommasini"},"license":"MIT","bugs":{"url":"https://github.com/brentvatne/react-native-scrollable-tab-view/issues"},"peerDependencies":{"react-native":">=0.20.0"},"homepage":"https://github.com/brentvatne/react-native-scrollable-tab-view#readme","dependencies":{"@react-native-community/viewpager":"3.3.0","create-react-class":"^15.6.2","deprecated-react-native-prop-types":"^2.3.0","prop-types":"^15.6.0","react-timer-mixin":"^0.13.3"},"devDependencies":{"babel-eslint":"^6.1.2","eslint":"^3.1.1"},"_id":"@tommasini/react-native-scrollable-tab-view@1.1.2","gitHead":"1ccd52610e05b24c2c49c55893996756c0eaf7f8","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jeRMjuPRlIMVzVKK9/j0yjVRGERMR7qjanivjWbOuWITr3My9TqF7/ID1e0fGTydTZ+u6EdET1sBeWcCKmdBAg==","shasum":"db5310bf8f63b1ad304d561ba8de9e49c6491511","tarball":"https://registry.npmjs.org/@tommasini/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-1.1.2.tgz","fileCount":11,"unpackedSize":45183,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDR2zbDkcfhJ32UNPBQDoNntOZodDNLk4gFxRCP5dVd+AiEAw7OpaHBIqh3sa1LIxk/LkIbO/aX02xz7f/TQMsIscTA="}]},"_npmUser":{"name":"tommasini","email":"tommasini15@gmail.com"},"directories":{},"maintainers":[{"name":"tommasini","email":"tommasini15@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-scrollable-tab-view_1.1.2_1758213958576_0.7125827042372772"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-18T15:45:39.134Z","modified":"2025-09-18T16:45:58.957Z","1.1.0":"2025-09-18T15:45:39.421Z","1.1.1":"2025-09-18T15:57:29.865Z","1.1.2":"2025-09-18T16:45:58.762Z"},"bugs":{"url":"https://github.com/brentvatne/react-native-scrollable-tab-view/issues"},"author":{"name":"tommasini"},"license":"MIT","homepage":"https://github.com/brentvatne/react-native-scrollable-tab-view#readme","keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"repository":{"type":"git","url":"git+https://github.com/brentvatne/react-native-scrollable-tab-view.git"},"description":"This is a fork of react-native-scrollable-tab-view","maintainers":[{"name":"tommasini","email":"tommasini15@gmail.com"}],"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<a href=\"https://appetize.io/embed/6qfv7eydjtm34mhn6qwj2nt3xm?embed=true&screenOnly=false&xdocMsg=true&debug=true&scale=100&deviceColor=black&orientation=portrait&device=iphone6s&osVersion=9.3&deviceId=RGV2aWNlOjU2Y2FjNTExZWQwOTM2MTEwMGRhYTNlNg&platform=ios&width=375&height=668&phoneWidth=416&phoneHeight=870&screenOffsetLeft=21&screenOffsetTop=100&params=%7B%7D\" target=\"_blank\"><strong>Run this example</strong></a>\n\n<a href=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo.gif\"><img src=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo.gif\" width=\"350\"></a>\n<a href=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo-fb.gif\"><img src=\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo-fb.gif\" width=\"350\"></a>\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      <ScrollableTabView>\n        <ReactPage tabLabel=\"React\" />\n        <FlowPage tabLabel=\"Flow\" />\n        <JestPage tabLabel=\"Jest\" />\n      </ScrollableTabView>\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      <ScrollableTabView renderTabBar={() => <CustomTabBar someProp={'here'} />}>\n        <ReactPage tabLabel=\"React\" />\n        <FlowPage tabLabel=\"Flow\" />\n        <JestPage tabLabel=\"Jest\" />\n      </ScrollableTabView>\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<a href=\"http://www.abeautifulsite.net/recording-a-screencast-with-quicktime/\" target=\"_blank\">How to make video</a>\n\n<a href=\"https://github.com/jclem/gifify\" target=\"_blank\">How to make gif from video</a>\n\n---\n\n**MIT Licensed**\n","readmeFilename":"README.md"}