{"id":21388513,"url":"https://github.com/monte9/react-native-parallax-scrollview","last_synced_at":"2025-04-07T08:22:53.690Z","repository":{"id":54258712,"uuid":"91723140","full_name":"Monte9/react-native-parallax-scrollview","owner":"Monte9","description":"The Parallax ScrollView component we all deserve. :rocket:","archived":false,"fork":false,"pushed_at":"2022-07-22T13:03:02.000Z","size":11194,"stargazers_count":279,"open_issues_count":8,"forks_count":54,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T06:08:29.123Z","etag":null,"topics":["android","ios","profile","react-native","scrollview-component","stickyheader"],"latest_commit_sha":null,"homepage":"https://expo.io/@monte9/parallax-scrollview-example","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Monte9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-18T17:59:17.000Z","updated_at":"2024-11-27T15:48:57.000Z","dependencies_parsed_at":"2022-08-13T10:10:57.109Z","dependency_job_id":null,"html_url":"https://github.com/Monte9/react-native-parallax-scrollview","commit_stats":null,"previous_names":["monte9/react-native-scroll-view"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-parallax-scrollview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-parallax-scrollview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-parallax-scrollview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Monte9%2Freact-native-parallax-scrollview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Monte9","download_url":"https://codeload.github.com/Monte9/react-native-parallax-scrollview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615657,"owners_count":20967243,"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":["android","ios","profile","react-native","scrollview-component","stickyheader"],"created_at":"2024-11-22T12:18:20.418Z","updated_at":"2025-04-07T08:22:53.656Z","avatar_url":"https://github.com/Monte9.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"react-native-parallax-scroll-view\" src=\"http://i.imgur.com/xZQZeL1.jpg\" width=\"1200\"\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-parallax-scrollview\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-native-parallax-scrollview.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-native-parallax-scrollview\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/react-native-parallax-scrollview.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Demo\n\n![Demo gif](./react-native-scroll-view.gif)\n\n## Installation\n\nThis package has a dependency of React Native Elements. Install RNE first with:\n\n```yarn add react-native-elements``` (make sure the version is `0.19.1`)\n\nFinally install this package using yarn or npm:\n\n```yarn add react-native-parallax-scrollview```\n\n## Usage\n\n### Default Profile Component\n\n``` jsx\nimport ParallaxScrollView from 'react-native-parallax-scrollview';\n\n\u003cParallaxScrollView /\u003e\n```\n\n### Default header view with custom User\n\n```jsx\n\u003cParallaxScrollView\n  windowHeight={SCREEN_HEIGHT * 0.4}\n  backgroundSource='http://i.imgur.com/UyjQBkJ.png'\n  navBarTitle='John Oliver'\n  userName='John Oliver'\n  userTitle='Comedian'\n  userImage='http://i.imgur.com/RQ1iLOs.jpg'\n  leftIcon={{name: 'rocket', color: 'rgba(131, 175, 41, 1)', size: 30, type: 'font-awesome'}}\n  rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}\n/\u003e\n```\n\n### Default Header view \u0026 Custom ScrollView content\n\n```jsx\n\u003cParallaxScrollView\n  windowHeight={SCREEN_HEIGHT * 0.4}\n  backgroundSource='http://i.imgur.com/UyjQBkJ.png'\n  navBarTitle='John Oliver'\n  userName='John Oliver'\n  userTitle='Comedian'\n  userImage='http://i.imgur.com/RQ1iLOs.jpg'\n  leftIcon={{name: 'rocket', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}\n  rightIcon={{name: 'user', color: 'rgba(193, 193, 193, 1)', size: 30, type: 'font-awesome'}}\n\u003e\n  \u003cScrollView style={{flex: 1, backgroundColor: 'rgba(228, 117, 125, 1)'}}\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003eCustom view\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going.\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going..\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going...\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ethe end! :)\u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/ScrollView\u003e\n\u003c/ParallaxScrollView\u003e\n```\n\n### Custom Header view \u0026 ScrollView content\n\n```jsx\n\u003cParallaxScrollView\n  windowHeight={SCREEN_HEIGHT}\n  backgroundSource='http://i.imgur.com/s4JEY9E.jpg'\n  navBarTitle='Custom Title'\n  navBarTitleColor='black'\n  navBarColor='white'\n  headerView={(\n    \u003cView style={styles.headerView}\u003e\n      \u003cView style={styles.headerTextView}\u003e\n        \u003cText style={styles.headerTextViewTitle}\u003eMy App\u003c/Text\u003e\n        \u003cText style={styles.headerTextViewSubtitle}\u003e\n          Custom Header View\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  )}\n  leftIcon={{name: 'rocket', color: 'rgba(228, 117, 125, 1)', size: 30, type: 'font-awesome'}}\n  leftIconOnPress={() =\u003e this.setState({index: (this.state.index + 1 ) % 3})}\n  rightIcon={{name: 'user', color: 'rgba(228, 117, 125, 1)', size: 30, type: 'font-awesome'}}\n  rightIconOnPress={() =\u003e this.setState({index: (this.state.index + 1 ) % 3})}\n\u003e\n  \u003cScrollView style={{flex: 1, backgroundColor: 'rgba(228, 117, 125, 1)'}}\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003eCustom view\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going.\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going..\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ekeep going...\u003c/Text\u003e\n    \u003c/View\u003e\n    \u003cView style={{height: 300, justifyContent: 'center', alignItems: 'center'}}\u003e\n      \u003cText style={{fontSize: 32, color: 'white'}}\u003ethe end! :)\u003c/Text\u003e\n    \u003c/View\u003e\n  \u003c/ScrollView\u003e\n\u003c/ParallaxScrollView\u003e\n```\n\n## API\n\n| prop | default | type | description |\n| ---- | ---- | ----| ---- |\n| backgroundSource | {uri:http://i.imgur.com/6Iej2c3.png} | ImageSourcePropType | The background image for the header. The image source is (either a remote URL or a local file resource) ```backgroundSource={{uri:http://i.imgur.com/6Iej2c3.png}}``` or ```backgroundSource={require('./image.png')}```  |\n| onBackgroundLoadEnd | none | callback | Callback function when the background finishes loading (either with success or failure) |\n| onBackgroundLoadError | none | callback | Callback function when the background loading fails (an object is received with the error details) |\n| windowHeight | SCREEN_HEIGHT * 0.5 | number | The height of the header window |\n| navBarTitle | Katy Friedson | string | The title to be display on the NavBar header |\n| navBarTitleColor | 'white' | string | Color of the navBar title when displayed |\n| navBarColor | 'rgba(0, 0, 0, 1.0)' | string | Color of the navbar when shown |\n| navBarHeight | 65 | number | Height of the navBar when displayed |\n| navBarView | Left/Right Icons View | custom object | Pass in a custom object to override the default navigation bar view |\n| userName | Katy Friedson | string | The user name displayed in the collapsable header view |\n| userImage | http://i.imgur.com/uma9OfG.jpg | string | The user image displayed in the collapsable header view |\n| userTitle | Engineering Manager | string | The user title displayed in the collapsable header view |\n| headerView | Profile View | custom object | Pass in a custom object to override the default header view |\n| leftIcon | none | object | Pass in the left icon name and type as an object. ```leftIcon={{name: 'rocket', color: 'red', size: 30, type: 'font-awesome'}}```|\n| leftIconOnPress | none | callback | Callback function when the left icon is pressed |\n| leftIconUnderlayColor | 'transparent' | string | Underlay color for the left icon. |\n| rightIcon | none | object | Pass in the right icon name and type etc as an object. ```rightIcon={{name: 'user', color: 'blue', size: 30, type: 'font-awesome'}}```|\n| rightIconOnPress | none | callback | Callback function when the right icon is pressed |\n| rightIconUnderlayColor | 'transparent' | string | Underlay color for the right icon. |\n| *children* | List View | React Components | Render any react views/components as children and these will be rendered below the headerView |\n\n## Try it out\n\nYou can try it out with Exponent [here](https://exp.host/@monte9/parallax-scrollview-example)\n\n### Example\n\nLook at the [`example`](https://github.com/Monte9/react-native-parallax-scrollview/tree/master/example) folder to run the expo app locally.\n\n## Motivation\n\nCurrently there are a couple packages that provide a similar parallax Scrollview component ([here](https://github.com/jaysoo/react-native-parallax-scroll-view) and [here](https://github.com/lelandrichardson/react-native-parallax-view)) although both of them are not maintained and wasn't exactly what I was looking for.\n\nSo I challenged myself to create a Parallax ScrollView component (using [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view) as a base) with\n1. Sticky NavBar Header :tada:\n2. An awesome default profile component that just works out of the box (```\u003cParallaxScrollView /\u003e```)\n3. Flexible and comprehensive API to use the ScrollView component for any use case.\n\naka it's a **(Parallax) ScrollView component** for React Native that we *truly deserve* :rocket:\n\n## Feedback\n\nThis repo is being actively manitained. Feel free to open a new Issue with a `Feature Request` or submit a PR with an `Enhancement`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonte9%2Freact-native-parallax-scrollview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonte9%2Freact-native-parallax-scrollview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonte9%2Freact-native-parallax-scrollview/lists"}