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

Comparing version 0.16.14 to 0.16.15

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,

package.json

 {
   "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",

README.md

@@ -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. |

No alert changes

Improved metrics

Total package byte prevSize

1992600

increased by0.03%

Lines of code

267

increased by6.37%

Number of lines in readme file

73

increased by1.39%

No dependency changes