react-native-parallax-header

RNParallax (react-native-parallax-header)

• A react native scroll view component with Parallax header :p
• Inspired by GitHub - jaysoo/react-native-parallax-scroll-view
• Code is based on React Native ScrollView animated header – App & Flow – Medium and added little customisation :p

Installation

$ npm i react-native-parallax-header --save

Demo

iPhone X or XS (Using alwaysShowTitle={false} & alwaysShowNavBar={false})

iPhone X or XS

iPhone 8

Example

Refer to TestParallax for working example

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 = () => (
  <View style={styles.navContainer}>
    <View style={styles.statusBar} />
    <View style={styles.navBar}>
      <TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
        <Text style={{color: 'white'}}>About</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.iconRight} onPress={() => {}}>
        <Text style={{color: 'white'}}>Me</Text>
      </TouchableOpacity>
    </View>
  </View>
);

const renderContent = () => {
  return (
    <View style={styles.body}>
      {Array.from(Array(30).keys()).map((i) => (
        <View
          key={i}
          style={{padding: 15, alignItems: 'center', justifyContent: 'center'}}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </View>
  );
};

const title = () => {
  return (
    <View style={styles.body}>
      <Text style={{color: 'white', fontSize: 25}}>Parallax Header</Text>
    </View>
  );
};

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <ReactNativeParallaxHeader
        headerMinHeight={HEADER_HEIGHT}
        headerMaxHeight={250}
        extraScrollHeight={20}
        navbarColor="#3498db"
        titleStyle={styles.titleStyle}
        title={title()}
        backgroundImage={require('./bg.png')}
        backgroundImageScale={1.2}
        renderNavBar={renderNavBar}
        renderContent={renderContent}
        containerStyle={styles.container}
        contentContainerStyle={styles.contentContainer}
        innerContainerStyle={styles.container}
        scrollViewProps={{
          onScrollBeginDrag: () => 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 <View />
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 <Animated.View> 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 <ScrollView> contentContainerStyle style	Default to null
containerStyle	style	No	This is the style to override default outermost <View> style	Default to null
scrollViewStyle	style	No	This is the scrollview style to override default <ScrollView> style	Default to null
innerContainerStyle	style	No	This is the inner content style to override default <View> style inside <ScrollView> 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 {}