{"id":3953,"url":"https://github.com/i6mi6/react-native-parallax-scroll-view","last_synced_at":"2025-05-14T03:08:22.341Z","repository":{"id":41519340,"uuid":"48082406","full_name":"i6mi6/react-native-parallax-scroll-view","owner":"i6mi6","description":"A ScrollView-like component with parallax and sticky header support.","archived":false,"fork":false,"pushed_at":"2024-11-10T05:23:08.000Z","size":10604,"stargazers_count":2322,"open_issues_count":97,"forks_count":379,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-11T00:43:12.241Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i6mi6.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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-12-16T02:33:09.000Z","updated_at":"2025-04-08T14:08:22.000Z","dependencies_parsed_at":"2024-01-28T10:03:28.340Z","dependency_job_id":"41fe9164-91d5-4c87-9816-700109962601","html_url":"https://github.com/i6mi6/react-native-parallax-scroll-view","commit_stats":{"total_commits":154,"total_committers":19,"mean_commits":8.105263157894736,"dds":"0.26623376623376627","last_synced_commit":"2988b604d5a72ab3d4ee251febe13023b107b276"},"previous_names":["jaysoo/react-native-parallax-scroll-view"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-parallax-scroll-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-parallax-scroll-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-parallax-scroll-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-parallax-scroll-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i6mi6","download_url":"https://codeload.github.com/i6mi6/react-native-parallax-scroll-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322604,"owners_count":21084336,"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-01-05T20:16:56.393Z","updated_at":"2025-04-11T00:43:47.063Z","avatar_url":"https://github.com/i6mi6.png","language":"JavaScript","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["UI"],"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    \u003cParallaxScrollView\n      backgroundColor=\"blue\"\n      contentBackgroundColor=\"pink\"\n      parallaxHeaderHeight={300}\n      // renderScrollComponent={() =\u003e \u003cAnimated.View /\u003e}\n      renderScrollComponent={() =\u003e \u003cAnimatedCustomScrollView /\u003e}\n      renderForeground={() =\u003e (\n       \u003cView style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n          \u003cText\u003eHello World!\u003c/Text\u003e\n        \u003c/View\u003e\n      )}\u003e\n      \u003cView style={{ height: 500 }}\u003e\n        \u003cText\u003eScroll me\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/ParallaxScrollView\u003e\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    \u003cParallaxScrollView\n      backgroundColor=\"blue\"\n      contentBackgroundColor=\"pink\"\n      parallaxHeaderHeight={300}\n      renderForeground={() =\u003e (\n       \u003cView style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}\u003e\n          \u003cText\u003eHello World!\u003c/Text\u003e\n        \u003c/View\u003e\n      )}\u003e\n      \u003cView style={{ height: 500 }}\u003e\n        \u003cText\u003eScroll me\u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/ParallaxScrollView\u003e\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| `parallaxHeaderContainerStyle` | `object` | No | These styles will be applied to the parallax header view content container  |\n| `parallaxHeaderStyle` | `object` | No | These styles will be applied to the parallax header view content  |\n| `backgroundImageStyle` | `object` | No | These styles will be applied to the background image header view content  |\n| `stickyHeaderStyle` | `object` | No | These styles will be applied to the sticky headerStyle view content  |\n| `scrollEvent` | `func` | No | Callback to recieve the animated scroll event values |\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-parallax-scroll-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi6mi6%2Freact-native-parallax-scroll-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-parallax-scroll-view/lists"}