A react native scroll view component with Parallax header :p
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore Update Read Me Sep 20, 2017
README.md Code Refactoring and release 1.0.5 Oct 3, 2017
index.js Minor eslint fixes Mar 8, 2018
package.json Release v1.0.6 Mar 7, 2018

README.md

RNParallax (react-native-parallax-header)

GitHub stars GitHub forks GitHub issues

NPM

Installation

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

Demo

iPhone X

iPhone X (Image) iPhone X (Color)

iPhone 8

iPhone 8 (Image) iPhone 8 (Color)

Example

import ReactNativeParallaxHeader from 'react-native-parallax-header';

const viewImages = {
  background: require('../../../img/test.jpg'),
};


const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.white,
  },
  titleStyle: {
    fontSize: 16,
  },
});

render() {
  return (
    <View style={styles.container}>
      <ReactNativeParallaxHeader
        headerMinHeight={120}
        headerMaxHeight={170}
        extraScrollHeight={20}
        navbarColor={Colors.primary}
        title={'Parallax Header :p'}
        titleStyle={styles.titleStyle}
        backgroundImage={viewImages.background}
        backgroundImageScale={1.2}
        renderNavBar={this.renderNavBar}
        renderContent={this.renderContent}
      />
    </View>
  );
}

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 200
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 is 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 50
navbarColor string No This is the background color of the navbar (after scroll up) Default color is #3498db
title string No This is the title to be display in the header Default is empty string ‘’
titleStyle style No This is the title style to override default font size/color Default to color: ‘white’ text and fontSize: 16
scrollEventThrottle number No This is the scroll event throttle Default is 16