react-native-parallax-scroll-view - npm Package Compare versions

Comparing version 0.21.1 to 0.21.2

package.json

 {
 	"name": "react-native-parallax-scroll-view",
-	"version": "0.21.1",
+	"version": "0.21.2",
 	"description": "A ScrollView-like component with parallax and sticky header support",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

 [![](https://img.shields.io/npm/dm/react-native-parallax-scroll-view.svg?style=flat-square)](https://www.npmjs.com/package/react-native-parallax-scroll-view)
 
+[![NPM](https://nodei.co/npm/react-native-parallax-scroll-view.png)](https://www.npmjs.com/package/react-native-parallax-scroll-view)
+
 # Rodrigocs - Animated Driver
@@ -111,2 +113,3 @@
 | `renderBackground` | `func` | No | This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using `backgroundColor`) |
+| `renderContentBackground` | `func` | No | This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visible `View`) |
 | `renderFixedHeader` | `func` | No | This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You should set its height and width appropriately. |
@@ -113,0 +116,0 @@ | `renderForeground` |  `func` | No |This renders the foreground header that moves at same speed as scroll content. |

src/index.js

 import React, { Component } from 'react'
-import { Animated, Dimensions, ScrollView, View, ViewPropTypes } from 'react-native'
+import { Animated, Dimensions, ScrollView, View, ViewPropTypes, Image } from 'react-native'
 
@@ -16,2 +16,4 @@ const styles = require('./styles')
 
+const noRender = () => <View style={{display: 'none'}} />
+
 // Override `toJSON` of interpolated value because of
@@ -36,2 +38,3 @@ // an error when serializing style on view inside inspector.
 	renderBackground: func,
+	renderContentBackground: func,
 	renderFixedHeader: func,
@@ -84,2 +87,3 @@ renderForeground: func,
 			renderBackground,
+			renderContentBackground,
 			renderFixedHeader,
@@ -115,2 +119,3 @@ renderForeground,
 			stickyHeaderHeight,
+			renderContentBackground,
 			contentContainerStyle
@@ -262,3 +267,3 @@ })
 									inputRange: [-viewHeight, 0],
-									outputRange: [outputScaleValue, 1],
+									outputRange: [outputScaleValue * 1.5, 1],
 									extrapolate: 'clamp'
@@ -313,3 +318,3 @@ })
 		children,
-		{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle }
+		{ contentBackgroundColor, stickyHeaderHeight, contentContainerStyle, renderContentBackground }
 	) {
@@ -321,5 +326,13 @@ const { viewHeight } = this.state
 
+		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 => {
@@ -340,2 +353,3 @@ // Adjust the bottom height so we can scroll the parallax header all the way up.
 			>
+				{renderContentBackground()}
 				{children}
@@ -349,3 +363,7 @@ </View>
 			<View
-				ref={ref => (this._footerComponent = ref)}
+				ref={ref => {
+					if (ref) {
+						this._footerComponent = ref;
+					}
+				}}
 				style={{ backgroundColor: contentBackgroundColor }}
@@ -425,2 +443,3 @@ />
 	renderBackground: renderEmpty,
+	renderContentBackground: noRender,
 	renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
@@ -427,0 +446,0 @@ renderForeground: null,

No alert changes

Improved metrics

Total package byte prevSize

21574

increased by3.89%

Lines of code

440

increased by3.77%

Number of lines in readme file

140

increased by2.19%

No dependency changes