Home

Awesome

RNParallax (react-native-parallax-header)

GitHub stars GitHub forks GitHub issues

NPM

Installation

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

Demo

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

iPhone X

iPhone X or XS

iPhone X

iPhone 8

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

PropertyTypeRequiredDescriptionDefault
renderNavBarfuncNoThis renders the nav bar componentEmpty <View />
renderContentfuncYESThis renders the scroll view content-
headerMaxHeightnumberNoThis is the header maximum heightDefault to 170
headerMinHeightnumberNoThis is the header minimum heightDefault to common ios & android navbar height (have support for iPhone X too :p)
backgroundImageimage sourceNoThis renders the background image of the header (if specified, background color will not take effect)Default to null
backgroundImageScalenumberNoThis is the image scale - either enlarge or shrink (after scrolling to bottom & exceed the headerMaxHeight)Default is 1.5
backgroundColorstringNoThis is the color of the parallax background (before scrolling up), will not be used if backgroundImage is specifiedDefault color is #303F9F
extraScrollHeightnumberNoThis is the extra scroll height (after scrolling to bottom & exceed the headerMaxHeight)Default is 30
navbarColorstringNoThis is the background color of the navbar (after scroll up)Default color is #3498db
statusBarColorstringNoThis is the status bar color (for android) navBarColor will be used if no statusBarColor is passed inDefault to null
titleanyNoThis is the title to be display in the header, can be string or componentDefault to null
titleStylestyleNoThis is the title style to override default font size/colorDefault to color: ‘white’ text and fontSize: 16
headerTitleStylestyleNoThis is the header title animated view style to override default <Animated.View> styleDefault to null
scrollEventThrottlenumberNoThis is the scroll event throttleDefault is 16
contentContainerStylestyleNoThis is the contentContainerStyle style to override default <ScrollView> contentContainerStyle styleDefault to null
containerStylestyleNoThis is the style to override default outermost <View> styleDefault to null
scrollViewStylestyleNoThis is the scrollview style to override default <ScrollView> styleDefault to null
innerContainerStylestyleNoThis is the inner content style to override default <View> style inside <ScrollView> componentDefault to null
alwaysShowTitleboolNoThis is to determine whether show or hide the title after scrollDefault to true
alwaysShowNavBarboolNoThis is to determine whether show or hide the navBar before scrollDefault to true
scrollViewPropsobjectNoThis is to override default scroll view propertiesDefault to {}