From c74493837f292a80d14fc2d8d2da0c7785c2399e Mon Sep 17 00:00:00 2001 From: Nico Troia Date: Thu, 26 Jul 2018 03:41:49 -0400 Subject: [PATCH 1/3] move sticky header out of the way when hidden so foreground touches are not blocked --- src/index.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/index.js b/src/index.js index 8787b6f..1773781 100644 --- a/src/index.js +++ b/src/index.js @@ -371,6 +371,13 @@ class ParallaxScrollView extends Component { }) { const { viewWidth } = this.state const { scrollY } = this + + const translateY = interpolate(scrollY, { + inputRange: [0, stickyHeaderHeight], + outputRange: [-stickyHeaderHeight, 0], + extrapolate: 'clamp' + }) + if (renderStickyHeader || renderFixedHeader) { const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight) return ( @@ -379,6 +386,7 @@ class ParallaxScrollView extends Component { styles.stickyHeader, { width: viewWidth, + transform: [{ translateY }], ...(stickyHeaderHeight ? { height: stickyHeaderHeight } : null) } ]} @@ -388,6 +396,7 @@ class ParallaxScrollView extends Component { style={{ backgroundColor: backgroundColor, height: stickyHeaderHeight, + transform: [{ translateY }], opacity: interpolate(scrollY, { inputRange: [0, p], outputRange: [0, 1], From 23d03b9cfaeabf249e4085a15664900b628cc3f3 Mon Sep 17 00:00:00 2001 From: Nico Troia Date: Thu, 9 Aug 2018 05:37:42 -0400 Subject: [PATCH 2/3] wait until translate finishes before animating opacity --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 1773781..269d6e0 100644 --- a/src/index.js +++ b/src/index.js @@ -398,7 +398,7 @@ class ParallaxScrollView extends Component { height: stickyHeaderHeight, transform: [{ translateY }], opacity: interpolate(scrollY, { - inputRange: [0, p], + inputRange: [stickyHeaderHeight, p], outputRange: [0, 1], extrapolate: 'clamp' }) From 25f3f4a931c01789d55c46f1fbd7791a7c14dfc1 Mon Sep 17 00:00:00 2001 From: Nico Troia Date: Wed, 12 Sep 2018 21:45:46 -0400 Subject: [PATCH 3/3] Update index.js Make parent View Animated --- src/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 269d6e0..3d70e07 100644 --- a/src/index.js +++ b/src/index.js @@ -372,21 +372,21 @@ class ParallaxScrollView extends Component { const { viewWidth } = this.state const { scrollY } = this - const translateY = interpolate(scrollY, { - inputRange: [0, stickyHeaderHeight], - outputRange: [-stickyHeaderHeight, 0], - extrapolate: 'clamp' - }) + const translateY = interpolate(scrollY, { + inputRange: [0, stickyHeaderHeight], + outputRange: [-stickyHeaderHeight, 0], + extrapolate: 'clamp' + }) if (renderStickyHeader || renderFixedHeader) { const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight) return ( - : null} {renderFixedHeader && renderFixedHeader()} - + ) } else { return null