Merge pull request #106 from FactorBench/master

render content background added

Author: i6mi6

src/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { Animated, Dimensions, ScrollView, View, ViewPropTypes } from 'react-native'
+import { Animated, Dimensions, ScrollView, View, ViewPropTypes, Image } from 'react-native'
 
 const styles = require('./styles')
 
@@ -13,6 +13,8 @@ const pivotPoint = (a, b) => a - b
 
 const renderEmpty = () => <View />
 
+const noRender = () => <View style={{display: 'none'}} />
+
 // Override `toJSON` of interpolated value because of
 // an error when serializing style on view inside inspector.
 // See: https://github.com/jaysoo/react-native-parallax-scroll-view/issues/23
@@ -32,6 +34,7 @@ const IPropTypes = {
 	onChangeHeaderVisibility: func,
 	parallaxHeaderHeight: number.isRequired,
 	renderBackground: func,
+	renderContentBackground: func,
 	renderFixedHeader: func,
 	renderForeground: func,
 	renderScrollComponent: func,
@@ -79,6 +82,7 @@ class ParallaxScrollView extends Component {
 			fadeOutBackground,
 			parallaxHeaderHeight,
 			renderBackground,
+			renderContentBackground,
 			renderFixedHeader,
 			renderForeground,
 			renderParallaxHeader,
@@ -109,6 +113,7 @@ class ParallaxScrollView extends Component {
 		const bodyComponent = this._wrapChildren(children, {
 			contentBackgroundColor,
 			stickyHeaderHeight,
+			renderContentBackground,
 			contentContainerStyle
 		})
 		const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor })
@@ -305,16 +310,24 @@ class ParallaxScrollView extends Component {
 
 	_wrapChildren(
 		children,
-		{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }
+		{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle, renderContentBackground }
 	) {
 		const { viewHeight } = this.state
 		const containerStyles = [{ backgroundColor: contentBackgroundColor }]
 
 		if (contentContainerStyle) containerStyles.push(contentContainerStyle)
 
+		this.containerHeight = this.state.viewHeight;
+
+		children.forEach((item) => {
+			if (item && Object.keys(item).length != 0) {
+				this.containerHeight = 0;
+			}
+		});
+
 		return (
 			<View
-				style={containerStyles}
+				style={[containerStyles, { minHeight: this.containerHeight }]}
 				onLayout={e => {
 					// Adjust the bottom height so we can scroll the parallax header all the way up.
 					const { nativeEvent: { layout: { height } } } = e
@@ -330,6 +343,7 @@ class ParallaxScrollView extends Component {
 					}
 				}}
 			>
+				{renderContentBackground()}
 				{children}
 			</View>
 		)
@@ -338,7 +352,11 @@ class ParallaxScrollView extends Component {
 	_renderFooterSpacer({ contentBackgroundColor }) {
 		return (
 			<View
-				ref={ref => (this._footerComponent = ref)}
+				ref={ref => {
+					if (ref) {
+						this._footerComponent = ref;
+					}
+				}}
 				style={{ backgroundColor: contentBackgroundColor }}
 			/>
 		)
@@ -413,6 +431,7 @@ ParallaxScrollView.defaultProps = {
 	onChangeHeaderVisibility: () => {},
 	renderScrollComponent: props => <Animated.ScrollView {...props} />,
 	renderBackground: renderEmpty,
+	renderContentBackground: noRender,
 	renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
 	renderForeground: null,
 	stickyHeaderHeight: 0,