{"_id":"@mftechio/react-native-scrollable-tab-view","_rev":"33-3a20d7925e59e0646c3bea5bb6006f2c","name":"@mftechio/react-native-scrollable-tab-view","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@mftechio/react-native-scrollable-tab-view","version":"1.0.0","keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"author":{"name":"Brent Vatne"},"license":"MIT","_id":"@mftechio/react-native-scrollable-tab-view@1.0.0","maintainers":[{"name":"donaldo.mftech","email":"donaldo@mftech.io"},{"name":"jonathan_mftech","email":"jonathan@mftech.io"},{"name":"hnry23","email":"henry@mftech.io"},{"name":"mftech_christhoval","email":"christhoval@mftech.io"},{"name":"mftechhq","email":"apps@mftech.io"},{"name":"ocabrera01","email":"orlando@mftech.io"},{"name":"javier_mftech","email":"javier@mftech.io"},{"name":"jaimchevalier98","email":"jaime@mftech.io"}],"homepage":"https://github.com/MFTech-PTY/react-native-scrollable-tab-view#readme","bugs":{"url":"https://github.com/MFTech-PTY/react-native-scrollable-tab-view/issues"},"dist":{"shasum":"36d4e4f3cb6573ca01178d5c464f09c128dc9ccd","tarball":"https://registry.npmjs.org/@mftechio/react-native-scrollable-tab-view/-/react-native-scrollable-tab-view-1.0.0.tgz","fileCount":10,"integrity":"sha512-PhF+GzFnR6TbwNmRZWzz+kUti7VzYwlM9rY8sV5bQrgtVrODkoMht3uV6EewHQtNjJulNizRDEW0TdiEADh+mA==","signatures":[{"sig":"MEQCIGX1+xHAWZIw4beIqSkIIoEw57qlnNKCjPaM0THq0ZyAAiApsH4IyCUSYNsjznNP1Zvo0YTfMjgEUgnpTAywxIzigQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2RanCRA9TVsSAnZWagAAHzEP/R/21ckaZR6CKjuv7qct\nnOdrrRazU9d65vcIhtxQZ5uv1Fv7fHXLMMXbbfJ7cjL8KcBd9pBwTLAO5LrL\nauldmQUxXvH0KL7dUiLrhbLjXtAb7UwISkwi4J03uLzNOTv5dQwKB/SJjL2K\nmkQNLRdkhweiKdEUvDqpMUQo8uVpA+dljAqQg+R5TTHPoBWafibpkpp3ATX5\nulI0D3jiTb0j+hSTsr1G+Ep1Fg4dbfrWEKDqzrEercDQbujXwKbrLQxbLJPK\nZOLZ0T+Cfq8MkHSbtiD/Zx/VhNQcGrm47JGI5G1/7/XZYS98vG1jO5YcCgNV\nTXKiJ03LJF7rssc9V87x/jeZYToqdd9kGfA+/p8pcDwKEcakS8hmJcK2zm58\nIc4JgQFJog/IIA9nR6fNSVEEl25djo23RsJUCYY2Bv2aIPsMkHwlANKUksmw\nu/BiHFsg7D4mHouBuRDvJhTZD+Rr2+EnJYLmH+f68dnCkbSoPPtITZT6ymbH\nRmit9XXCtP8nTh01+5r/GfwOoDwG0ZxnUehtKIgdNfb5EfAn9/KxHS0gSFMY\nM5w3Ln1cNF2D5plJitRq9J6GPpEe+/sMJaBOdsf3VgyltQ0VoJpTNvQvMsv3\nbg5WK2ZTE1ZkfWb3yZVD8k2g4z/ZpHhduIDBQZ/e86KDyOk0siS7hRRLCa4J\nWxwn\r\n=YWHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","gitHead":"a7f46de184123be9703c57b0a7618ae0557c8a87","scripts":{"lint":"eslint -c .eslintrc . --ignore-path .gitignore","test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"mftech_christhoval","email":"christhoval@mftech.io"},"repository":{"url":"git+https://github.com/MFTech-PTY/react-native-scrollable-tab-view.git","type":"git"},"_npmVersion":"8.0.0","description":"[](https://badge.fury.io/js/react-native-scrollable-tab-view)","directories":{},"_nodeVersion":"16.11.1","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"},"_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.0.0_1635198524230_0.5462850253971483","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-10-25T21:48:44.163Z","modified":"2026-04-21T22:14:23.323Z","1.0.0":"2021-10-25T21:48:44.391Z"},"bugs":{"url":"https://github.com/MFTech-PTY/react-native-scrollable-tab-view/issues"},"author":{"name":"Brent Vatne"},"license":"MIT","homepage":"https://github.com/MFTech-PTY/react-native-scrollable-tab-view#readme","keywords":["react-native-component","react-component","react-native","ios","tab","scrollable"],"repository":{"url":"git+https://github.com/MFTech-PTY/react-native-scrollable-tab-view.git","type":"git"},"description":"[](https://badge.fury.io/js/react-native-scrollable-tab-view)","maintainers":[{"email":"roberto@mftech.io","name":"robertomftech"},{"email":"cabreu@mftech.io","name":"carlos.abreu"},{"email":"jhoel@mftech.io","name":"jhoel"},{"email":"apps@mftech.io","name":"mftechio-org"},{"email":"henry@mftech.io","name":"hnry23"},{"email":"jrios@mftech.io","name":"jrios2021"},{"email":"john@mftech.io","name":"jpzinli"},{"email":"mariana@mftech.io","name":"mefv31"},{"email":"jhonaiker@mftech.io","name":"jhonaikermf"}],"readme":"\n## react-native-scrollable-tab-view\n[](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\nRun this example\n\n![](\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo.gif\")
\n![](\"https://raw.githubusercontent.com/brentvatne/react-native-scrollable-tab-view/master/demo_images/demo-fb.gif\")
\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 \n \n \n \n \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 }>\n \n \n \n \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\nHow to make video\n\nHow to make gif from video\n\n---\n\n**MIT Licensed**\n","readmeFilename":"README.md"}