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 or XS (Using alwaysShowTitle={false}
& alwaysShowNavBar={false}
)
![iPhone X](https://camo.githubusercontent.com/26ce334eb9cdbbffd388f26437fcda624645fca0fd50963e122cbfbe083eddb5/68747470733a2f2f692e6779617a6f2e636f6d2f32343334336532313237623865343739613532663462633538353365663435372e676966)
iPhone X or XS
![iPhone X](https://camo.githubusercontent.com/c5910eda9c9f260be75a2f310c3ec5026812c7fe866d501a6af3d0359fd93e48/68747470733a2f2f692e6779617a6f2e636f6d2f62323438383162313931636535613639653764653134623764306262363838652e676966)
iPhone 8
![iPhone 8](https://camo.githubusercontent.com/a2e0c92e8f065cf5e9b3cb8cb6727657df029570c647ecdec6e05cd9be1f1308/68747470733a2f2f692e6779617a6f2e636f6d2f65656265666632386337646637623032333366616262396366326139633564632e676966)
Example
import Icon from 'react-native-vector-icons/MaterialIcons';
import ReactNativeParallaxHeader from 'react-native-parallax-header';
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 images = {
background: require('../../../img/test.jpg'),
};
const styles = StyleSheet.create({
navContainer: {
height: HEADER_HEIGHT,
marginHorizontal: 10,
},
statusBar: {
height: STATUS_BAR_HEIGHT,
backgroundColor: Colors.transparent,
},
navBar: {
height: NAV_BAR_HEIGHT,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
backgroundColor: Colors.transparent,
},
titleStyle: {
color: Colors.white,
fontWeight: 'bold',
fontSize: 18,
},
});
renderNavBar = () => (
<View style={styles.navContainer}>
<View style={styles.statusBar} />
<View style={styles.navBar}>
<TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
<Icon name="add" size={25} color="#fff" />
</TouchableOpacity>
<TouchableOpacity style={styles.iconRight} onPress={() => {}}>
<Icon name="search" size={25} color="#fff" />
</TouchableOpacity>
</View>
</View>
)
render() {
return (
<View style={commonStyles.container}>
<ReactNativeParallaxHeader
headerMinHeight={HEADER_HEIGHT}
headerMaxHeight={250}
extraScrollHeight={20}
navbarColor={Colors.primary}
title="Parallax Header ~"
titleStyle={styles.titleStyle}
backgroundImage={images.background}
backgroundImageScale={1.2}
renderNavBar={this.renderNavBar}
renderContent={this.renderContent}
containerStyle={{ flex: 1 }}
contentContainerStyle={{ flexGrow: 1 }}
innerContainerStyle={{ flex: 1 }}
scrollViewProps={{
onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
onScrollEndDrag: () => console.log('onScrollEndDrag'),
}}
/>
</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 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 |
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 {} |