{"_id":"@avkholion/react-native-parallax-scroll-view","_rev":"4-38d9908399f7228db016e52f598f62d9","name":"@avkholion/react-native-parallax-scroll-view","dist-tags":{"latest":"0.5.5"},"versions":{"0.21.3":{"name":"@avkholion/react-native-parallax-scroll-view","version":"0.21.3","description":"A ScrollView-like component with parallax and sticky header support","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"author":{"name":"Jack Hsu"},"license":"ISC","dependencies":{"prop-types":"^15.6.0"},"gitHead":"e68faeb9e87cc5aa1f2573da95838ff3079d69f2","bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","_id":"@avkholion/react-native-parallax-scroll-view@0.21.3","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-9L6aHDZiJWE66kbOTB44DsZaRIWFGYhk65vKvdt0GvCj6jzRweBtrNCGn4unnEich4c/S+UDQRuhVFXsfcNSJA==","shasum":"a41fceb2c9483cbd81994394b757471360850068","tarball":"https://registry.npmjs.org/@avkholion/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.21.3.tgz","fileCount":5,"unpackedSize":19879,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0Zo96tuMMCBmuEW+6fH/bBnOo3imSdF4XZMo+MwmdVAIhAJGVQ6C6mYyMjd0adCyRgPfq82aP4lSS7HrRGgq5MmSZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSnJbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyYQ/+OA65q31MSlXKsulV0mXF9RmU0FYV2pys/y2ziJ+7cEdHqBBw\r\nOFlUdeSpBge5NoXXxOnMXlxCOMJnB1PRADWxTPujI28bhwC9UFTevrUqkkpU\r\nep3s+oEC8RIAg4BYsrCIT2vbo/lofcqxyXruntYZ/+Bdpmc8bgwC1dEV628f\r\nlNM0NxEr3GWEhNPBotXk98QRml8AGsoxHqtbCkl1k4jwHTyUx/L0bDajfjNk\r\nS0/k2L7RpW00GHFdhBb00PRuZqYDt/ksdrW1PEpUoOTn5K9HcBLe5LvG0xDs\r\nWr9RfjTum5BnR5LyOqxanpKGrSNYnNUUaqq9u52eWFnnfZaXVXUnd2yUmWOm\r\npzfVL4fzvnwLtxdFuPObgkweAzDBb6zp/MAWo6FtLVCF+p/QXCKjIL9+05XH\r\nq2wsHIUFM7QJfLWHZNVYV+s0V6E3QmN4DG0AVjH5W997/+I84KJcodtWnooF\r\nuATYbsU360BMOOoGnjmpmZXCUl2agrnpd/rxZAK3EnCqSFMEdrme364jXJ/a\r\nv6th7P6WhXrpEBxGLUGp65YwFo9GRyUt1KU9fHJWeA+CL4smZneLRs9PwOsT\r\nb0R2UYKJrdNocRyTxp8KeFUrxULa+/x9wBLeqmIzRL3pI5aeJlCsyVHskWRq\r\nvknYu2ZactllyAM5KurdJdQVov1sN/q+gi0=\r\n=h8t0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"avkholion","email":"avk@holion.dk"},"directories":{},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-parallax-scroll-view_0.21.3_1682600539293_0.02236026309869188"},"_hasShrinkwrap":false},"0.3.0":{"name":"@avkholion/react-native-parallax-scroll-view","version":"0.3.0","types":"index.d.ts","description":"A ScrollView-like component with parallax and sticky header support","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"author":{"name":"Jack Hsu"},"license":"ISC","dependencies":{"prop-types":"^15.6.0"},"gitHead":"2ab1ef7fc90dc3fc38047f1730bef205acf9c25d","bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","_id":"@avkholion/react-native-parallax-scroll-view@0.3.0","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-CkmwaBJ5PDf92msvm8DRSyT7YbsRvYmvep4GaYFO687iSL9pcYmrt/eoyif8NULJQxHa7aKQ1uHRZj7XbiTJYA==","shasum":"442d4e415e63ed1e0389f9a2f2b229eaacc90d4d","tarball":"https://registry.npmjs.org/@avkholion/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.3.0.tgz","fileCount":5,"unpackedSize":19918,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOXILI0Y/FFp24mGr+jpGbFKWEvJpRDV/X6+olEfxxOAiBQsnXd4cz/LecnYoo9E57dZIkd6uueSqyUij8y2V9TWw=="}]},"_npmUser":{"name":"avkholion","email":"avk@holion.dk"},"directories":{},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-parallax-scroll-view_0.3.0_1685037014060_0.4041603308166717"},"_hasShrinkwrap":false},"0.4.0":{"name":"@avkholion/react-native-parallax-scroll-view","version":"0.4.0","types":"index.d.ts","description":"A ScrollView-like component with parallax and sticky header support","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"author":{"name":"Jack Hsu"},"license":"ISC","dependencies":{"prop-types":"^15.6.0"},"gitHead":"2ab1ef7fc90dc3fc38047f1730bef205acf9c25d","bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","_id":"@avkholion/react-native-parallax-scroll-view@0.4.0","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-5O2xaFO6JhrTjx+Fciyt2prNp6TCyM3VoxcLoUGlIiwJUWF65XZMX8WklCkefJ90F2AMDPB7fPlFY8M+drYQiA==","shasum":"85fc504c4f9c90ea4dbe1c5af3bd8582aed131da","tarball":"https://registry.npmjs.org/@avkholion/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.4.0.tgz","fileCount":6,"unpackedSize":21002,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDv83DCWVe5VkL5C+WnB5XQ2VTerFaNAU7cD5lTsWYezAiEA9VWd2dr84x9LbLxIC799MmYII09MUSnEPyt1SD+2xOc="}]},"_npmUser":{"name":"avkholion","email":"avk@holion.dk"},"directories":{},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-parallax-scroll-view_0.4.0_1685689890742_0.8523980290344482"},"_hasShrinkwrap":false},"0.5.0":{"name":"@avkholion/react-native-parallax-scroll-view","version":"0.5.0","types":"index.d.ts","description":"A ScrollView-like component with parallax and sticky header support","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"author":{"name":"Jack Hsu"},"license":"ISC","dependencies":{"prop-types":"^15.6.0"},"gitHead":"2ab1ef7fc90dc3fc38047f1730bef205acf9c25d","bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","_id":"@avkholion/react-native-parallax-scroll-view@0.5.0","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-v56UB9GnTiHHySVQdYXfzCCzujIj1/HhHxlvJeDqA/jE6uym1BmBfvbeXLvsJtrGy6rSiR2Rkz8aFXCQ2QNTAA==","shasum":"3ec6f9c81c6381bfff9c03c8ad0e511697639a80","tarball":"https://registry.npmjs.org/@avkholion/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.5.0.tgz","fileCount":6,"unpackedSize":21034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzqrsfsKFIMNaR/cRA/UwPqpI1FJSt54PDIG5CY4lvmAiA7AoDd2lVhukUlw1TdxSEzYPRA1uN6Z5sZYvtfL5gjgA=="}]},"_npmUser":{"name":"avkholion","email":"avk@holion.dk"},"directories":{},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-parallax-scroll-view_0.5.0_1685690004931_0.35431069987996655"},"_hasShrinkwrap":false},"0.5.5":{"name":"@avkholion/react-native-parallax-scroll-view","version":"0.5.5","types":"index.d.ts","description":"A ScrollView-like component with parallax and sticky header support","main":"src/index.js","repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"author":{"name":"Jack Hsu"},"license":"ISC","dependencies":{"prop-types":"^15.6.0"},"gitHead":"2ab1ef7fc90dc3fc38047f1730bef205acf9c25d","bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","_id":"@avkholion/react-native-parallax-scroll-view@0.5.5","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-eUnNdiTRforwuXpw+OjXxdn3EFCe22YtmpovHUbJLU0upUymHqk3dM0kX+kj9jdLtjo8KIbxe7qK6hM1gju9sw==","shasum":"ebddb589959f5e60f7f10810697bfb96818e9a4a","tarball":"https://registry.npmjs.org/@avkholion/react-native-parallax-scroll-view/-/react-native-parallax-scroll-view-0.5.5.tgz","fileCount":6,"unpackedSize":21034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPXSEb/5Jevi2EgH/HRdnHh9wpmxTFHbx3tqw8BgUGOAiEAxzpAbP1HJ+viRjiabezK66JGPtenSVk+n4vJGqvhy2Q="}]},"_npmUser":{"name":"avkholion","email":"avk@holion.dk"},"directories":{},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-parallax-scroll-view_0.5.5_1685690156941_0.058417433618970005"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-27T13:02:19.217Z","0.21.3":"2023-04-27T13:02:19.482Z","modified":"2023-06-02T07:15:57.223Z","0.3.0":"2023-05-25T17:50:14.230Z","0.4.0":"2023-06-02T07:11:30.989Z","0.5.0":"2023-06-02T07:13:25.077Z","0.5.5":"2023-06-02T07:15:57.102Z"},"maintainers":[{"name":"avkholion","email":"avk@holion.dk"}],"description":"A ScrollView-like component with parallax and sticky header support","homepage":"https://github.com/avk-holion/react-native-parallax-scroll-view#readme","keywords":["react-native","react","parallax","scrollable","scrollview","sticky","react-component","ios","android"],"repository":{"type":"git","url":"git+https://github.com/avk-holion/react-native-parallax-scroll-view.git"},"author":{"name":"Jack Hsu"},"bugs":{"url":"https://github.com/avk-holion/react-native-parallax-scroll-view/issues"},"license":"ISC","readme":"[![](https://img.shields.io/npm/dm/react-native-parallax-scroll-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-parallax-scroll-view)\n\n[![NPM](https://nodei.co/npm/react-native-parallax-scroll-view.png)](https://www.npmjs.com/package/react-native-parallax-scroll-view)\n\n# Rodrigocs - Animated Driver\n\nThis component now uses Native Driver by default.\nRemember to pass a Animated component to `renderScrollComponent`, by default it has `Animated.ScrollView`\n\n# Example\n```js\nimport ParallaxScrollView from 'react-native-parallax-scroll-view';\nimport CustomScrollView from 'custom-scroll-view'\n\nconst AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)\n\nrender() {\n return (\n }\n renderScrollComponent={() => }\n renderForeground={() => (\n \n Hello World!\n \n )}>\n \n Scroll me\n \n \n );\n}\n```\n\n# react-native-parallax-scroll-view\n\nA `ScrollView`-like component that:\n\n- Has a parallax header\n- Has an optional sticky header\n- Is composable with any component that expects a `ScrollView` (e.g. `ListView` or [`InfiniteScrollView`](https://github.com/exponentjs/react-native-infinite-scroll-view))\n- Can be nested within other views\n- Works on iOS and Android\n\n## Installation\n\n```\n$ npm install react-native-parallax-scroll-view --save\n```\n\n**Note:** For React Native 0.19.0 and earlier, you'll want to use `react-native-parallax-scroll-view@0.17.4`. Version `0.18.0` changes the scrolling API to be compatible with React Native 0.20.0.\n\n## Demo\n\n\n| iOS | Android |\n| --- | ------- |\n| ![](./demo.ios.0.17.2.gif) | ![](./demo.android.0.17.2.gif) |\n\n## Basic Usage\n\n```js\nimport ParallaxScrollView from 'react-native-parallax-scroll-view';\n\n// Inside of a component's render() method:\nrender() {\n return (\n (\n \n Hello World!\n \n )}>\n \n Scroll me\n \n \n );\n}\n```\n\n## Examples\n\nPlease refer to the [ListView example](./examples/ListView/Talks.js) provided to see how `ParallaxScrollView` can be used in\ncombination with `ListView`.\n\nThe [Android ListView example](./examples/ListView/index.android.js) shows how you can use `PullToRefreshViewAndroid` with `ParallaxScrollView`.\n\nThere are more examples in the [examples](./examples) folder.\n\n## Usage (API)\n\nAll of the properties of `ScrollView` are supported. Please refer to the\n[`ScrollView` documentation](https://facebook.github.io/react-native/docs/scrollview.html) for more detail.\n\nThe `ParallaxScrollView` component adds a few additional properties, as described below.\n\n| Property | Type | Required | Description |\n| -------- | ---- | -------- | ----------- |\n| `backgroundColor` | `string` | No | The color of the header background. Defaults to `#000`) |\n| `backgroundScrollSpeed` | `number` | No | The speed factor that the background moves at relative to the foreground. Defaults to 5. |\n| `contentBackgroundColor` | `string` | No | This is the background color of the content. (Defaults to `'#fff'`) |\n| `fadeOutForeground` | `bool` | No | If `true`, the foreground will fade out as the user scrolls up. (Defaults to `true`) |\n| `onChangeHeaderVisibility` | `func` | No | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a `boolean` value to indicate whether header is visible or not. |\n| **`parallaxHeaderHeight`** | `number` | **Yes** |This is the height of parallax header. |\n| `renderBackground` | `func` | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using `backgroundColor`) |\n| `renderContentBackground` | `func` | No | This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visible `View`) |\n| `renderFixedHeader` | `func` | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You should set its height and width appropriately. |\n| `renderForeground` | `func` | No |This renders the foreground header that moves at same speed as scroll content. |\n| `renderScrollComponent` | `func` | No | A function with input `props` and outputs an `Animated.ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component, remember however to make it an Animated component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `Animated.ScrollView` with the given props) |\n| `renderStickyHeader` | `func` | No | This renders an optional sticky header that will stick to the top of view when parallax header scrolls up. |\n| `stickyHeaderHeight` | `number` | If `renderStickyHeader` is used | If `renderStickyHeader` is set, then its height must be specified. |\n| `contentContainerStyle` | `object` | No | These styles will be applied to the scroll view content container which wraps all of the child views. (same as for [ScrollView](https://facebook.github.io/react-native/docs/scrollview.html#contentcontainerstyle)) |\n| `outputScaleValue` | `number` | No | The value for the scale interpolation output value, default `5` |\n| `scrollEvent` | `func` | No | Callback to recieve the animated scroll event values |\n\n\n## Latest changes\n\n### 0.20.1\n- Added prop to change interpolated Scale Output Value\n\n### 0.20.0 // Rodrigocs\n- Now uses native driver, and tested with React Native 0.46.0\n- Adds `useNativeDriver` to improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))\n\nSee full changelog [here](./CHANGELOG.md).\n\n## Contributing\n\nI welcome contributions! Please open an issues if you have any feature ideas\nor find any bugs. I also accept pull requests with open arms. I will\ngo over the issues when I have time. :)\n","readmeFilename":"README.md"}