Merge pull request ascoders#394 from pxpeterxu/master

Allow specifying whether to use useNativeDriver

Author: ArtemKolichenkov

README.md

@@ -105,6 +105,7 @@ export default class App extends React.Component {
 | doubleClickInterval    | number                                                                                 | no       | Double click interval.                                                                                                                                                                                                               |                                                           |
 | pageAnimateTime        | number                                                                                 | no       | Set the animation time for page flipping.                                                                                                                                                                                            | `100`                                                     |
 | enablePreload          | boolean                                                                                | no       | Preload the next image                                                                                                                                                                                                               | `false`                                                   |
+| useNativeDriver        | boolean                                                                                | no       | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver)                                                                                                                        | `false`                                                   |
 | menus                  | function<br><br>`({cancel,saveToLocal}) => React.ReactElement<any>`                    | no       | Custom menus, with 2 methods:`cancel` to hide menus and `saveToLocal` to save image to camera
 | menuContext            | object<br><br>`{someKey: someValue}`                                                   | no       | Custom menu context.                              | `{ saveToLocal: 'save to the album', cancel: 'cancel' }`
 ## Development pattern

src/image-viewer.component.tsx

@@ -70,7 +70,7 @@ export default class ImageViewer extends React.Component<Props, State> {
       Animated.timing(this.fadeAnim, {
         toValue: 1,
         duration: 200,
-        useNativeDriver: false
+        useNativeDriver: !!this.props.useNativeDriver
       }).start();
     }
   }
@@ -111,7 +111,7 @@ export default class ImageViewer extends React.Component<Props, State> {
         Animated.timing(this.fadeAnim, {
           toValue: 1,
           duration: 200,
-          useNativeDriver: false
+          useNativeDriver: !!nextProps.useNativeDriver
         }).start();
       }
     );
@@ -307,7 +307,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     Animated.timing(this.positionX, {
       toValue: this.positionXNumber,
       duration: this.props.pageAnimateTime,
-      useNativeDriver: false
+      useNativeDriver: !!this.props.useNativeDriver
     }).start();
 
     const nextIndex = (this.state.currentShowIndex || 0) - 1;
@@ -341,7 +341,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     Animated.timing(this.positionX, {
       toValue: this.positionXNumber,
       duration: this.props.pageAnimateTime,
-      useNativeDriver: false
+      useNativeDriver: !!this.props.useNativeDriver
     }).start();
 
     const nextIndex = (this.state.currentShowIndex || 0) + 1;
@@ -366,7 +366,7 @@ export default class ImageViewer extends React.Component<Props, State> {
     Animated.timing(this.positionX, {
       toValue: this.standardPositionX,
       duration: 150,
-      useNativeDriver: false
+      useNativeDriver: !!this.props.useNativeDriver
     }).start();
   }
 

src/image-viewer.type.ts

@@ -98,6 +98,12 @@ export class Props {
    */
   public pageAnimateTime?: number = 100;
 
+  /** 
+   * 是否启用原生动画驱动
+   * Whether to use the native code to perform animations.
+   */
+  public useNativeDriver?: boolean = false;
+
   /**
    * 长按图片的回调
    */