# RNParallax (react-native-parallax-header) [![GitHub stars](https://img.shields.io/github/stars/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/stargazers) [![GitHub forks](https://img.shields.io/github/forks/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/network) [![GitHub issues](https://img.shields.io/github/issues/kyaroru/RNParallax.svg)](https://github.com/kyaroru/RNParallax/issues) [![NPM](https://nodei.co/npm/react-native-parallax-header.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-parallax-header/) - A react native scroll view component with Parallax header :p - Inspired by [GitHub - jaysoo/react-native-parallax-scroll-view](https://github.com/jaysoo/react-native-parallax-scroll-view) - Code is based on [React Native ScrollView animated header – App & Flow – Medium](https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e) and added little customisation :p ## Installation ```bash $ npm i react-native-parallax-header --save ``` ## Demo ### iPhone X or XS (Using `alwaysShowTitle={false}` & `alwaysShowNavBar={false}`) ![iPhone X](https://i.gyazo.com/24343e2127b8e479a52f4bc5853ef457.gif) ### iPhone X or XS ![iPhone X](https://i.gyazo.com/b24881b191ce5a69e7de14b7d0bb688e.gif) ### iPhone 8 ![iPhone 8](https://i.gyazo.com/eebeff28c7df7b0233fabb9cf2a9c5dc.gif) ## Example Refer to [TestParallax](https://github.com/kyaroru/TestParallax) for working example ```jsx import React from 'react'; import { StyleSheet, View, Text, StatusBar, Dimensions, TouchableOpacity, } from 'react-native'; import ReactNativeParallaxHeader from 'react-native-parallax-header'; const {height: SCREEN_HEIGHT} = Dimensions.get('window'); const IS_IPHONE_X = SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 896; const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0; const HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 64; const NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT; const renderNavBar = () => ( {}}> About {}}> Me ); const renderContent = () => { return ( {Array.from(Array(30).keys()).map((i) => ( Item {i + 1} ))} ); }; const title = () => { return ( Parallax Header ); }; const App = () => { return ( <> console.log('onScrollBeginDrag'), onScrollEndDrag: () => console.log('onScrollEndDrag'), }} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { flexGrow: 1, }, navContainer: { height: HEADER_HEIGHT, marginHorizontal: 10, }, statusBar: { height: STATUS_BAR_HEIGHT, backgroundColor: 'transparent', }, navBar: { height: NAV_BAR_HEIGHT, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', backgroundColor: 'transparent', }, titleStyle: { color: 'white', fontWeight: 'bold', fontSize: 18, }, }); export default App; ``` ## API Usage | Property | Type | Required | Description | Default | | -------- | ---- | -------- | ----------- | ------- | | `renderNavBar` | `func` | No | This renders the nav bar component | Empty `` | | `renderContent` | `func` | **YES** | This renders the scroll view content | - | | `headerMaxHeight` | `number` | No | This is the header maximum height | Default to `170` | | `headerMinHeight` | `number` | No | This is the header minimum height | Default to common ios & android navbar height (have support for iPhone X too :p) | | `backgroundImage` | `image source` | No | This renders the background image of the header (**if specified, background color will not take effect**) | Default to `null` | | `backgroundImageScale` | `number` | No | This is the image scale - either enlarge or shrink (after scrolling to bottom & exceed the headerMaxHeight) | Default is `1.5` | | `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` | | `extraScrollHeight` | `number` | No | This is the extra scroll height (after scrolling to bottom & exceed the headerMaxHeight) | Default is `30` | | `navbarColor` | `string` | No | This is the background color of the navbar (after scroll up) | Default color is `#3498db` | | `statusBarColor` | `string` | No | This is the status bar color (for android) navBarColor will be used if no statusBarColor is passed in | Default to `null` | | `title` | `any` | No | This is the title to be display in the header, can be string or component | Default to `null` | | `titleStyle` | `style` | No | This is the title style to override default font size/color | Default to `color: ‘white’ `text and `fontSize: 16` | | `headerTitleStyle` | `style` | No | This is the header title animated view style to override default `` style | Default to `null` | | `scrollEventThrottle` | `number` | No | This is the scroll event throttle | Default is `16` | | `contentContainerStyle` | `style` | No | This is the contentContainerStyle style to override default `` contentContainerStyle style | Default to null | | `containerStyle` | `style` | No | This is the style to override default outermost `` style | Default to null | | `scrollViewStyle` | `style` | No | This is the scrollview style to override default `` style | Default to null | | `innerContainerStyle` | `style` | No | This is the inner content style to override default `` style inside `` component | Default to null | | `alwaysShowTitle` | `bool` | No | This is to determine whether show or hide the title after scroll | Default to `true` | | `alwaysShowNavBar` | `bool` | No | This is to determine whether show or hide the navBar before scroll | Default to `true` | | `scrollViewProps` | `object` | No | This is to override default scroll view properties | Default to `{}` |

	Stars	Issues	Version	Updated	Created
react-native-collapse-view	30	7	1.0.0	7 years ago	7 years ago
react-native-parallax	583	13	0.3.0	8 years ago	9 years ago
react-native-parallax-header	525	13	1.1.4	4 years ago	7 years ago

react-native-collapse-view vs react-native-parallax vs react-native-parallax-header

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past