{"id":4097,"url":"https://github.com/kyaroru/RNParallax","last_synced_at":"2025-08-04T00:31:26.902Z","repository":{"id":54782271,"uuid":"104175549","full_name":"kyaroru/RNParallax","owner":"kyaroru","description":"A react native scroll view component with Parallax header :p","archived":false,"fork":false,"pushed_at":"2021-02-08T12:24:24.000Z","size":30,"stargazers_count":529,"open_issues_count":13,"forks_count":113,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-23T22:45:03.019Z","etag":null,"topics":["header","parallax","react-native","scroll-view"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyaroru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-20T06:33:24.000Z","updated_at":"2025-06-22T21:48:47.000Z","dependencies_parsed_at":"2022-08-14T02:51:08.016Z","dependency_job_id":null,"html_url":"https://github.com/kyaroru/RNParallax","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/kyaroru/RNParallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyaroru%2FRNParallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyaroru%2FRNParallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyaroru%2FRNParallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyaroru%2FRNParallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyaroru","download_url":"https://codeload.github.com/kyaroru/RNParallax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyaroru%2FRNParallax/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267109973,"owners_count":24037629,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["header","parallax","react-native","scroll-view"],"created_at":"2024-01-05T20:17:00.948Z","updated_at":"2025-08-04T00:31:26.645Z","avatar_url":"https://github.com/kyaroru.png","language":"JavaScript","readme":"\n# RNParallax (react-native-parallax-header)\n[![GitHub stars](https://img.shields.io/github/stars/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/network)\n[![GitHub issues](https://img.shields.io/github/issues/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/issues)\n\n[![NPM](https://nodei.co/npm/react-native-parallax-header.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-native-parallax-header/)\n\n- A react native scroll view component with Parallax header :p\n- Inspired by [GitHub - jaysoo/react-native-parallax-scroll-view](https://github.com/jaysoo/react-native-parallax-scroll-view)\n- Code is based on [React Native ScrollView animated header – App \u0026 Flow – Medium](https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e) and added little customisation :p\n\n## Installation\n```bash\n$ npm i react-native-parallax-header --save\n```\n## Demo\n### iPhone X or XS (Using `alwaysShowTitle={false}` \u0026 `alwaysShowNavBar={false}`)\n![iPhone X](https://i.gyazo.com/24343e2127b8e479a52f4bc5853ef457.gif)\n\n### iPhone X or XS\n![iPhone X](https://i.gyazo.com/b24881b191ce5a69e7de14b7d0bb688e.gif)\n\n### iPhone 8\n![iPhone 8](https://i.gyazo.com/eebeff28c7df7b0233fabb9cf2a9c5dc.gif)\n\n## Example\nRefer to [TestParallax](https://github.com/kyaroru/TestParallax) for working example\n```jsx\nimport React from 'react';\nimport {\n  StyleSheet,\n  View,\n  Text,\n  StatusBar,\n  Dimensions,\n  TouchableOpacity,\n} from 'react-native';\nimport ReactNativeParallaxHeader from 'react-native-parallax-header';\n\nconst {height: SCREEN_HEIGHT} = Dimensions.get('window');\n\nconst IS_IPHONE_X = SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 896;\nconst STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;\nconst HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 64;\nconst NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT;\n\nconst renderNavBar = () =\u003e (\n  \u003cView style={styles.navContainer}\u003e\n    \u003cView style={styles.statusBar} /\u003e\n    \u003cView style={styles.navBar}\u003e\n      \u003cTouchableOpacity style={styles.iconLeft} onPress={() =\u003e {}}\u003e\n        \u003cText style={{color: 'white'}}\u003eAbout\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n      \u003cTouchableOpacity style={styles.iconRight} onPress={() =\u003e {}}\u003e\n        \u003cText style={{color: 'white'}}\u003eMe\u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/View\u003e\n  \u003c/View\u003e\n);\n\nconst renderContent = () =\u003e {\n  return (\n    \u003cView style={styles.body}\u003e\n      {Array.from(Array(30).keys()).map((i) =\u003e (\n        \u003cView\n          key={i}\n          style={{padding: 15, alignItems: 'center', justifyContent: 'center'}}\u003e\n          \u003cText\u003eItem {i + 1}\u003c/Text\u003e\n        \u003c/View\u003e\n      ))}\n    \u003c/View\u003e\n  );\n};\n\nconst title = () =\u003e {\n  return (\n    \u003cView style={styles.body}\u003e\n      \u003cText style={{color: 'white', fontSize: 25}}\u003eParallax Header\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003c\u003e\n      \u003cStatusBar barStyle=\"dark-content\" /\u003e\n      \u003cReactNativeParallaxHeader\n        headerMinHeight={HEADER_HEIGHT}\n        headerMaxHeight={250}\n        extraScrollHeight={20}\n        navbarColor=\"#3498db\"\n        titleStyle={styles.titleStyle}\n        title={title()}\n        backgroundImage={require('./bg.png')}\n        backgroundImageScale={1.2}\n        renderNavBar={renderNavBar}\n        renderContent={renderContent}\n        containerStyle={styles.container}\n        contentContainerStyle={styles.contentContainer}\n        innerContainerStyle={styles.container}\n        scrollViewProps={{\n          onScrollBeginDrag: () =\u003e console.log('onScrollBeginDrag'),\n          onScrollEndDrag: () =\u003e console.log('onScrollEndDrag'),\n        }}\n      /\u003e\n    \u003c/\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  navContainer: {\n    height: HEADER_HEIGHT,\n    marginHorizontal: 10,\n  },\n  statusBar: {\n    height: STATUS_BAR_HEIGHT,\n    backgroundColor: 'transparent',\n  },\n  navBar: {\n    height: NAV_BAR_HEIGHT,\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    flexDirection: 'row',\n    backgroundColor: 'transparent',\n  },\n  titleStyle: {\n    color: 'white',\n    fontWeight: 'bold',\n    fontSize: 18,\n  },\n});\n\nexport default App;\n```\n\n## API Usage\n| Property | Type | Required | Description | Default |\n| -------- | ---- | -------- | ----------- | ------- |\n| `renderNavBar` | `func` | No | This renders the nav bar component | Empty `\u003cView /\u003e` |\n| `renderContent` | `func` | **YES** | This renders the scroll view content | - |\n| `headerMaxHeight` | `number` | No | This is the header maximum height | Default to `170` |\n| `headerMinHeight` | `number` | No | This is the header minimum height | Default to common ios \u0026 android navbar height (have support for iPhone X too :p) |\n| `backgroundImage` | `image source` | No | This renders the background image of the header (**if specified, background color will not take effect**) | Default to `null` |\n| `backgroundImageScale` | `number` | No | This is the image scale - either enlarge or shrink (after scrolling to bottom \u0026 exceed the headerMaxHeight) | Default is `1.5` |\n| `backgroundColor` | `string` | No | This is the color of the parallax background (before scrolling up), **will not be used if `backgroundImage` is specified** | Default color is `#303F9F` |\n| `extraScrollHeight` | `number` | No | This is the extra scroll height (after scrolling to bottom \u0026 exceed the headerMaxHeight) | Default is `30` |\n| `navbarColor` | `string` | No | This is the background color of the navbar (after scroll up) | Default color is `#3498db` |\n| `statusBarColor` | `string` | No | This is the status bar color (for android) navBarColor will be used if no statusBarColor is passed in | Default to `null` |\n| `title` | `any` | No | This is the title to be display in the header, can be string or component | Default to `null` |\n| `titleStyle` | `style` | No | This is the title style to override default font size/color | Default to `color: ‘white’ `text and `fontSize: 16` |\n| `headerTitleStyle` | `style` | No | This is the header title animated view style to override default `\u003cAnimated.View\u003e` style | Default to `null` |\n| `scrollEventThrottle` | `number` | No | This is the scroll event throttle | Default is `16` |\n| `contentContainerStyle` | `style` | No | This is the contentContainerStyle style to override default `\u003cScrollView\u003e` contentContainerStyle style | Default to null |\n| `containerStyle` | `style` | No | This is the style to override default outermost `\u003cView\u003e` style | Default to null |\n| `scrollViewStyle` | `style` | No | This is the scrollview style to override default `\u003cScrollView\u003e` style | Default to null |\n| `innerContainerStyle` | `style` | No | This is the inner content style to override default `\u003cView\u003e` style inside `\u003cScrollView\u003e` component | Default to null |\n| `alwaysShowTitle` | `bool` | No | This is to determine whether show or hide the title after scroll | Default to `true` |\n| `alwaysShowNavBar` | `bool` | No | This is to determine whether show or hide the navBar before scroll | Default to `true` |\n| `scrollViewProps` | `object` | No | This is to override default scroll view properties | Default to `{}` |\n","funding_links":[],"categories":["Components","JavaScript","Others"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyaroru%2FRNParallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyaroru%2FRNParallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyaroru%2FRNParallax/lists"}