Merge pull request #55 from bamlab/feature/native-animation

feat(useNativeDriver): add possibility of using native driver for ani…

Author: Nhacsam

README.md

@@ -60,6 +60,7 @@ The `HeaderImageScrollView` handle also the following props. None is required :
 | `minOverlayOpacity` | `number` | `0` | Opacity of a black overlay on the header before any scroll | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L96) |
 | `maxOverlayOpacity` | `number` | `0.3` | Opacity of a black overlay on the header when in navbar mode | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/3b9d2d0d7f71c6bf877e2d10cc65c9ab7e1b484d/src/Pages/TvShow.js#L96) |
 | `overlayColor` | `string` | `black` | Color of the overlay on the header | [example](https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/Colors.js#L16) |
+| `useNativeDriver` | `boolean` | `false` | Use native driver for the animation for performance improvement. A few props are unsupported at the moment if `useNativeDriver=true` (`onScroll`, `ScrollComponent`, `renderTouchableFixedForeground`) | - |
 
 
 

src/ImageHeaderScrollView.js

@@ -42,6 +42,7 @@ export type Props = ScrollViewProps & {
   ScrollViewComponent: React$ComponentType<ScrollViewProps>,
   scrollViewBackgroundColor: string,
   headerImage?: ?SourceProps,
+  useNativeDriver: ?boolean,
 };
 
 export type DefaultProps = {
@@ -186,6 +187,15 @@ class ImageHeaderScrollView extends Component<Props, State> {
       return <View />;
     }
 
+    if (this.props.useNativeDriver) {
+      if (__DEV__) {
+        console.warn(
+          'useNativeDriver=true and renderTouchableFixedForeground is not supported at the moment due to the animation of height unsupported with the native driver'
+        );
+      }
+      return null;
+    }
+
     return (
       <Animated.View style={[styles.header, styles.touchableFixedForeground, { height }]}>
         {this.props.renderTouchableFixedForeground()}
@@ -230,12 +240,16 @@ class ImageHeaderScrollView extends Component<Props, State> {
       style,
       contentContainerStyle,
       onScroll,
-      ScrollViewComponent,
       scrollViewBackgroundColor,
+      useNativeDriver,
       ...scrollViewProps
     } = this.props;
     /* eslint-enable no-unused-vars */
 
+    const ScrollViewComponent = useNativeDriver
+      ? Animated.ScrollView
+      : this.props.ScrollViewComponent;
+
     const inset = maxHeight - minHeight;
 
     return (
@@ -253,7 +267,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
         {this.renderHeader()}
         <ScrollViewComponent
           ref={ref => (this.scrollViewRef = ref)}
-          scrollEventThrottle={16}
+          scrollEventThrottle={useNativeDriver ? 1 : 16}
           overScrollMode="never"
           {...scrollViewProps}
           contentContainerStyle={[
@@ -266,7 +280,13 @@ class ImageHeaderScrollView extends Component<Props, State> {
             childrenStyle,
           ]}
           style={[styles.container, style]}
-          onScroll={this.onScroll}
+          onScroll={
+            useNativeDriver
+              ? Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }], {
+                  useNativeDriver: true,
+                })
+              : this.onScroll
+          }
         />
         {this.renderTouchableFixedForeground()}
         {this.renderForeground()}