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

Comparing version 0.16.19 to 0.16.20

package.json

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

src/index.js

@@ -8,7 +8,7 @@ const React = require('react-native');
   View
-} = React;
+  } = React;
 
 const styles = require('./styles');
 
-const { any, func, number, string } = React.PropTypes;
+const { func, number, string } = React.PropTypes;
 
@@ -19,2 +19,4 @@ const window = Dimensions.get('window');
 
+const midpoint = (a, b) => (a - b) / 2;
+
 // Properties accepted by `ParallaxScrollView`.
@@ -47,3 +49,2 @@ const IPropTypes = {
     this._footerHeight = 0;
-    this._animatedEvent = Animated.event([{nativeEvent: { contentOffset: { y: this.state.scrollY } } }]);
   }
@@ -65,3 +66,3 @@
       ...scrollViewProps
-    } = this.props;
+      } = this.props;
 
@@ -81,7 +82,7 @@ const background = this._renderBackground({ headerBackgroundColor, parallaxHeaderHeight, stickyHeaderHeight, renderBackground });
           React.cloneElement(scrollElement, {
-            ref: SCROLLVIEW_REF,
-            style: [styles.scrollView, scrollElement.props.style],
-            scrollEventThrottle: 16,
-            onScroll: this._onScroll.bind(this),
-          },
+              ref: SCROLLVIEW_REF,
+              style: [styles.scrollView, scrollElement.props.style],
+              scrollEventThrottle: 16,
+              onScroll: this._onScroll.bind(this),
+            },
             parallaxHeader,
@@ -126,9 +127,9 @@ bodyComponent,
       onScroll: prevOnScroll = () => {}
-    } = this.props;
+      } = this.props;
 
-    const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
+    const mid = midpoint(parallaxHeaderHeight, stickyHeaderHeight);
 
-    this._animatedEvent(e);
+    this._maybeUpdateScrollPosition(e);
 
-    if (e.nativeEvent.contentOffset.y >= midpoint) {
+    if (e.nativeEvent.contentOffset.y >= mid) {
       onChangeHeaderVisibility(false);
@@ -142,2 +143,16 @@ } else {
 
+  // This optimizes the state update of current scrollY since we don't need to
+  // perform any updates when user has scrolled past the midpoint of
+  // parallaxHeaderHeight - stickyHeaderHeight.
+  _maybeUpdateScrollPosition(e) {
+    const { parallaxHeaderHeight, stickyHeaderHeight } = this.props;
+    const { scrollY } = this.state;
+    const { nativeEvent: { contentOffset: { y: offsetY } } } = e;
+    const mid = midpoint(parallaxHeaderHeight, stickyHeaderHeight);
+
+    if (offsetY <= mid || scrollY._value <= mid) {
+      scrollY.setValue(offsetY);
+    }
+  }
+
   _maybeUpdateViewDimensions(e) {
@@ -156,3 +171,3 @@ const { nativeEvent: { layout: { width, height} } } = e;
     const { viewWidth, viewHeight, scrollY } = this.state;
-    const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
+    const mid = midpoint(parallaxHeaderHeight, stickyHeaderHeight);
     return (
@@ -166,4 +181,4 @@ <Animated.View
               translateY: scrollY.interpolate({
-                inputRange: [0, midpoint],
-                outputRange: [0, -midpoint],
+                inputRange: [0, mid],
+                outputRange: [0, -mid],
                 extrapolateRight: 'extend',
@@ -188,3 +203,3 @@ extrapolateLeft: 'clamp'
   _renderParallaxHeader({ parallaxHeaderHeight, stickyHeaderHeight, renderParallaxHeader }) {
-    const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
+    const mid = midpoint(parallaxHeaderHeight, stickyHeaderHeight);
     return (
@@ -200,3 +215,3 @@ <View style={styles.parallaxHeaderContainer}>
                   opacity: this.state.scrollY.interpolate({
-                    inputRange: [0, midpoint - 20, midpoint],
+                    inputRange: [0, mid - 20, mid],
                     outputRange: [1, .9, 0],
@@ -238,13 +253,13 @@ extrapolate: 'extend'
   _maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, headerBackgroundColor, renderFixedHeader, renderStickyHeader }) {
-    const { viewWidth, viewHeight, scrollY } = this.state;
+    const { viewWidth, scrollY } = this.state;
     if (renderStickyHeader) {
-      const midpoint = (parallaxHeaderHeight - stickyHeaderHeight) / 2;
+      const mid = midpoint(parallaxHeaderHeight, stickyHeaderHeight);
       return (
         <View style={[styles.stickyHeader, { width: viewWidth, height: stickyHeaderHeight }]}>
           <Animated.View
-              style={{
+            style={{
                 backgroundColor: headerBackgroundColor,
                 height: stickyHeaderHeight,
                 opacity: scrollY.interpolate({
-                  inputRange: [0, midpoint],
+                  inputRange: [0, mid],
                   outputRange: [0, 1],
@@ -255,6 +270,6 @@ extrapolate: 'clamp'
             <Animated.View
-                style={{
+              style={{
                   transform: [{
                     translateY: scrollY.interpolate({
-                      inputRange: [0, midpoint],
+                      inputRange: [0, mid],
                       outputRange: [stickyHeaderHeight, 0],
@@ -261,0 +276,0 @@ extrapolate: 'clamp'

No alert changes

Improved metrics

Total package byte prevSize

2165303

increased by0.02%

Lines of code

294

increased by4.26%

No dependency changes