Optimization of the scroll

Author: Nhacsam

src/ImageHeaderScrollView.js

@@ -90,10 +90,6 @@ class ImageHeaderScrollView extends Component {
   }
 
   renderHeader() {
-    const headerHeight = this.interpolateOnImageHeight([
-      this.props.maxHeight,
-      this.props.minHeight,
-    ]);
     const overlayOpacity = this.interpolateOnImageHeight([
       this.props.minOverlayOpacity,
       this.props.maxOverlayOpacity,
@@ -105,7 +101,11 @@ class ImageHeaderScrollView extends Component {
       extrapolate: 'clamp',
     });
 
-    const headerTransformStyle = { height: headerHeight, transform: [{ scale: headerScale }] };
+    const headerTransformStyle = {
+      height: this.props.maxHeight,
+      transform: [{ scale: headerScale }],
+    };
+
     return (
       <Animated.View style={[styles.header, headerTransformStyle]}>
         <Animated.View style={[styles.blackOverlay, { opacity: overlayOpacity }]} />
@@ -138,29 +138,43 @@ class ImageHeaderScrollView extends Component {
   }
 
   render() {
-    const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
     const scrollViewProps = _.pick(this.props, _.keys(ScrollView.propTypes));
+
+    const headerScrollDistance = this.interpolateOnImageHeight([
+      this.props.maxHeight,
+      this.props.maxHeight - this.props.minHeight,
+    ]);
+    const topMargin = this.interpolateOnImageHeight([0, this.props.minHeight]);
+
+    const childrenContainerStyle = StyleSheet.flatten([
+      { transform: [{ translateY: headerScrollDistance }] },
+      { backgroundColor: 'white' },
+      this.props.childrenStyle,
+    ]);
+
     return (
       <View
         style={styles.container}
         ref={(ref) => { this.container = ref; }}
         onLayout={() => this.container.measureInWindow((x, y) => this.setState({ pageY: y }))}
       >
-        <ScrollView
-          ref={(ref) => { this[SCROLLVIEW_REF] = ref; }}
-          style={[styles.container, { marginTop: this.props.minHeight }]}
-          scrollEventThrottle={16}
-          onScroll={Animated.event(
-            [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
-          )}
-          {...scrollViewProps}
-        >
-          <Animated.View style={[{ paddingTop: headerScrollDistance }, this.props.childrenStyle]}>
-            {this.props.children}
-          </Animated.View>
-        </ScrollView>
         { this.renderHeader() }
         { this.renderForeground() }
+        <Animated.View style={[styles.container, { transform: [{ translateY: topMargin }] }]}>
+          <ScrollView
+            ref={(ref) => { this[SCROLLVIEW_REF] = ref; }}
+            style={styles.container}
+            scrollEventThrottle={16}
+            onScroll={Animated.event(
+              [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
+            )}
+            {...scrollViewProps}
+          >
+            <Animated.View style={childrenContainerStyle}>
+              {this.props.children}
+            </Animated.View>
+          </ScrollView>
+        </Animated.View>
       </View>
     );
   }

src/__tests__/__snapshots__/TriggeringView.js.snap

@@ -6,30 +6,6 @@ exports[`TriggeringView renders correctly by default 1`] = `
       "flex": 1,
     }
   }>
-  <ScrollView
-    onScroll={[Function]}
-    scrollEventThrottle={16}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        Object {
-          "marginTop": 80,
-        },
-      ]
-    }>
-    <View
-      style={
-        Object {
-          "paddingTop": 45,
-        }
-      }>
-      <View
-        collapsable={false}
-        onLayout={[Function]} />
-    </View>
-  </ScrollView>
   <View
     style={
       Object {
@@ -93,6 +69,42 @@ exports[`TriggeringView renders correctly by default 1`] = `
     }>
     <View />
   </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
+      }
+    }>
+    <ScrollView
+      onScroll={[Function]}
+      scrollEventThrottle={16}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }>
+      <View
+        style={
+          Object {
+            "backgroundColor": "white",
+            "transform": Array [
+              Object {
+                "translateY": 125,
+              },
+            ],
+          }
+        }>
+        <View
+          collapsable={false}
+          onLayout={[Function]} />
+      </View>
+    </ScrollView>
+  </View>
 </View>
 `;
 

src/__tests__/__snapshots__/index.js.snap

@@ -6,26 +6,6 @@ exports[`ImageHeaderScrollView renders correctly by default 1`] = `
       "flex": 1,
     }
   }>
-  <ScrollView
-    onScroll={[Function]}
-    scrollEventThrottle={16}
-    style={
-      Array [
-        Object {
-          "flex": 1,
-        },
-        Object {
-          "marginTop": 80,
-        },
-      ]
-    }>
-    <View
-      style={
-        Object {
-          "paddingTop": 45,
-        }
-      } />
-  </ScrollView>
   <View
     style={
       Object {
@@ -89,5 +69,37 @@ exports[`ImageHeaderScrollView renders correctly by default 1`] = `
     }>
     <View />
   </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "transform": Array [
+          Object {
+            "translateY": 0,
+          },
+        ],
+      }
+    }>
+    <ScrollView
+      onScroll={[Function]}
+      scrollEventThrottle={16}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }>
+      <View
+        style={
+          Object {
+            "backgroundColor": "white",
+            "transform": Array [
+              Object {
+                "translateY": 125,
+              },
+            ],
+          }
+        } />
+    </ScrollView>
+  </View>
 </View>
 `;