RNParallax (react-native-parallax-header)
![GitHub issues](https://camo.githubusercontent.com/2eeec5ce142e3d10431a99fc71f750d73793d40fd11d161e2bc285b54a3bb911/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6973737565732f6b7961726f72752f524e506172616c6c61782e737667)
![NPM](https://camo.githubusercontent.com/7e287d171d120696ce9c8f05d5d6a1b1886648d503a7a28a420b2bcce811f31e/68747470733a2f2f6e6f6465692e636f2f6e706d2f72656163742d6e61746976652d706172616c6c61782d6865616465722e706e673f646f776e6c6f6164733d7472756526646f776e6c6f616452616e6b3d747275652673746172733d74727565)
Installation
$ npm i react-native-parallax-header --save
Demo
iPhone X
![iPhone X (Color)](https://camo.githubusercontent.com/24c1c940524c9a99b26275f9fe4f359bf132fcbc22e7e8c4a3e3cc3558d3add2/687474703a2f2f672e7265636f726469742e636f2f4f7762743258345a436f2e676966)
iPhone 8
![iPhone 8 (Color)](https://camo.githubusercontent.com/38e8f48381fc1f1e1afdcb9b3b26c2495690322e4812f76aa3c50cfd599429d5/687474703a2f2f672e7265636f726469742e636f2f59785874516a54584d552e676966)
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 |