react-native-parallax-scroll-view
Advanced tools
Comparing version 0.16.14 to 0.16.15
40
index.js
@@ -24,2 +24,3 @@ const React = require('react-native'); | ||
contentBackgroundColor: string, | ||
onChangeHeaderVisibility: func, | ||
parallaxHeaderHeight: number.isRequired, | ||
@@ -67,3 +68,3 @@ renderParallaxHeader: func.isRequired, | ||
const footerSpacer = this._renderFooterSpacer({ contentBackgroundColor }); | ||
const maybeStickyHeader = this._maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }); | ||
const maybeStickyHeader = this._maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }); | ||
@@ -114,4 +115,19 @@ return ( | ||
_onScroll(e) { | ||
const { onScroll: prevOnScroll = () => {} } = this.props; | ||
const { | ||
parallaxHeaderHeight, | ||
stickyHeaderHeight, | ||
onChangeHeaderVisibility, | ||
onScroll: prevOnScroll = () => {} | ||
} = this.props; | ||
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2; | ||
this._animatedEvent(e); | ||
if (e.nativeEvent.contentOffset.y >= midpoint) { | ||
onChangeHeaderVisibility(false); | ||
} else { | ||
onChangeHeaderVisibility(true); | ||
} | ||
prevOnScroll(e); | ||
@@ -121,2 +137,3 @@ } | ||
_renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground }) { | ||
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2; | ||
return ( | ||
@@ -130,4 +147,4 @@ <Animated.View | ||
translateY: this.state.scrollY.interpolate({ | ||
inputRange: [0, parallaxHeaderHeight - stickyHeaderHeight], | ||
outputRange: [0, -parallaxHeaderHeight], | ||
inputRange: [0, midpoint], | ||
outputRange: [0, -midpoint], | ||
extrapolateRight: 'extend', | ||
@@ -152,2 +169,3 @@ extrapolateLeft: 'clamp' | ||
_renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader }) { | ||
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2; | ||
return ( | ||
@@ -163,3 +181,3 @@ <View style={styles.parallaxHeaderContainer}> | ||
opacity: this.state.scrollY.interpolate({ | ||
inputRange: [0, (parallaxHeaderHeight - stickyHeaderHeight) / 2 - 20, (parallaxHeaderHeight - stickyHeaderHeight) / 2], | ||
inputRange: [0, midpoint - 20, midpoint], | ||
outputRange: [1, .9, 0], | ||
@@ -199,4 +217,5 @@ extrapolate: 'extend' | ||
_maybeRenderStickyHeader({ stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) { | ||
_maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) { | ||
if (renderStickyHeader) { | ||
const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2; | ||
return ( | ||
@@ -209,4 +228,4 @@ <View style={[styles.stickyHeader, { height: stickyHeaderHeight }]}> | ||
opacity: this.state.scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [0, 0, 1], | ||
inputRange: [0, midpoint], | ||
outputRange: [0, 1], | ||
extrapolate: 'clamp' | ||
@@ -219,4 +238,4 @@ }) | ||
translateY: this.state.scrollY.interpolate({ | ||
inputRange: [-window.height, 0, stickyHeaderHeight], | ||
outputRange: [stickyHeaderHeight, stickyHeaderHeight, 0], | ||
inputRange: [0, midpoint], | ||
outputRange: [stickyHeaderHeight, 0], | ||
extrapolate: 'clamp' | ||
@@ -243,2 +262,3 @@ }) | ||
contentBackgroundColor: '#fff', | ||
onChangeHeaderVisibility: () => {}, | ||
renderScrollComponent: props => <ScrollView {...props}/>, | ||
@@ -245,0 +265,0 @@ stickyHeaderHeight: 0, |
{ | ||
"name": "react-native-parallax-scroll-view", | ||
"version": "0.16.14", | ||
"version": "0.16.15", | ||
"description": "A ScrollView-like component with parallax and sticky header support", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -72,1 +72,2 @@ # react-native-parallax-scroll-view | ||
| `renderScrollComponent` | `func` | No | A function with input `props` and outputs a `ScrollView`-like component in which the content is rendered. This is useful if you want to provide your own scrollable component. (See: [https://github.com/exponentjs/react-native-scrollable-mixin](https://github.com/exponentjs/react-native-scrollable-mixin)) (By default, returns a `ScrollView` with the given props) | | ||
| `onChangeHeaderVisibility` | `func` | No | A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a `boolean` value to indicate whether header is visible or not. | |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1992600
267
73