Add StickyHeaderOffset

[Brandon Peck]

I needed my sticky header to appear after a certain point and have the fixed header overlay it. I'm sharing this in case anyone else wants to do the same

Today I used patch-package to patch react-native-parallax-scroll-view@0.21.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-parallax-scroll-view/src/index.js b/node_modules/react-native-parallax-scroll-view/src/index.js
index 8787b6f..0df833b 100644
--- a/node_modules/react-native-parallax-scroll-view/src/index.js
+++ b/node_modules/react-native-parallax-scroll-view/src/index.js
@@ -40,6 +40,7 @@ const IPropTypes = {
 	renderScrollComponent: func,
 	renderStickyHeader: func,
 	stickyHeaderHeight: number,
+	stickyHeaderOffset: number,
 	contentContainerStyle: ViewPropTypes.style,
 	outputScaleValue: number
 }
@@ -87,6 +88,7 @@ class ParallaxScrollView extends Component {
 			renderForeground,
 			renderParallaxHeader,
 			renderScrollComponent,
+			stickyHeaderOffset,
 			renderStickyHeader,
 			stickyHeaderHeight,
 			style,
@@ -122,6 +124,7 @@ class ParallaxScrollView extends Component {
 			stickyHeaderHeight,
 			backgroundColor,
 			renderFixedHeader,
+			stickyHeaderOffset,
 			renderStickyHeader
 		})
 		const scrollElement = renderScrollComponent(scrollViewProps)
@@ -157,7 +160,7 @@ class ParallaxScrollView extends Component {
    * Expose `ScrollView` API so this component is composable with any component that expects a `ScrollView`.
    */
 	getScrollResponder() {
-		return this.refs[SCROLLVIEW_REF]._component.getScrollResponder()
+		return this.refs[SCROLLVIEW_REF].getScrollResponder()
 	}
 	getScrollableNode() {
 		return this.getScrollResponder().getScrollableNode()
@@ -367,6 +370,7 @@ class ParallaxScrollView extends Component {
 		stickyHeaderHeight,
 		backgroundColor,
 		renderFixedHeader,
+		stickyHeaderOffset,
 		renderStickyHeader
 	}) {
 		const { viewWidth } = this.state
@@ -374,45 +378,35 @@ class ParallaxScrollView extends Component {
 		if (renderStickyHeader || renderFixedHeader) {
 			const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight)
 			return (
-				<View
-					style={[
-						styles.stickyHeader,
-						{
-							width: viewWidth,
-							...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null)
-						}
-					]}
-				>
-					{renderStickyHeader
-						? <Animated.View
-							style={{
-								backgroundColor: backgroundColor,
-								height: stickyHeaderHeight,
-								opacity: interpolate(scrollY, {
-									inputRange: [0, p],
-									outputRange: [0, 1],
-									extrapolate: 'clamp'
-								})
-							}}
-						>
-							<Animated.View
+				<View style={{ top: 0, position: 'absolute', width: '100%' }}>
+					{renderFixedHeader && renderFixedHeader()}
+
+					<View
+						style={[
+							styles.stickyHeader,
+							{
+								width: viewWidth,
+								...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null)
+							}
+						]}
+					>
+						{renderStickyHeader
+							? <Animated.View
 								style={{
-									transform: [
-										{
-											translateY: interpolate(scrollY, {
-												inputRange: [0, p],
-												outputRange: [stickyHeaderHeight, 0],
-												extrapolate: 'clamp'
-											})
-										}
-									]
+									backgroundColor: 'transparent',
+									height: stickyHeaderHeight,
+									opacity: interpolate(scrollY, {
+										inputRange: [stickyHeaderOffset ? stickyHeaderOffset : 0, p + (stickyHeaderOffset != null ? stickyHeaderOffset : 0)],
+										// inputRange: [0, p],
+										outputRange: [0, 1],
+										extrapolate: 'clamp'
+									})
 								}}
 							>
 								{renderStickyHeader()}
 							</Animated.View>
-						</Animated.View>
-						: null}
-					{renderFixedHeader && renderFixedHeader()}
+							: null}
+					</View>
 				</View>
 			)
 		} else {
@@ -435,6 +429,7 @@ ParallaxScrollView.defaultProps = {
 	renderParallaxHeader: renderEmpty, // Deprecated (will be removed in 0.18.0)
 	renderForeground: null,
 	stickyHeaderHeight: 0,
+	stickyHeaderOffset: null,
 	contentContainerStyle: null,
 	outputScaleValue: 5
 }

This issue body was partially generated by patch-package.

[AP Fritts]

This may be resolved by #129. Feedback is welcome if someone can confirm.