RNParallax (react-native-parallax-header)
$ npm i react-native-parallax-header --save
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>
);
}
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 |