From c1a2680c42dd9bbbfc48952221c4d09879563c30 Mon Sep 17 00:00:00 2001
From: Felix Clack <felixclack@gmail.com>
Date: Fri, 8 Jan 2021 08:11:18 +1000
Subject: [PATCH] Add `useNativeDriver` as a configuration option

Using this library the latest version of React Native (0.63.4) raises
warnings about explicitly setting `useNativeDriver` for the `Animated`
functions.

I considered hardcoding the value as false for instances of
`Animated.event` and `Animated.spring` to maintain the existing
behaviour but felt like exposing it as an option adds very little extra
complexity to the library while ensuring people can opt in to the native
animations if they want.
---
 LightboxOverlay.js | 12 +++++++-----
 README.md          |  1 +
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/LightboxOverlay.js b/LightboxOverlay.js
index 9e01f9a..d8e7ff9 100644
--- a/LightboxOverlay.js
+++ b/LightboxOverlay.js
@@ -63,13 +63,15 @@ export default class LightboxOverlay extends Component {
     renderHeader:    PropTypes.func,
     onOpen:          PropTypes.func,
     onClose:         PropTypes.func,
-    willClose:         PropTypes.func,
+    willClose:       PropTypes.func,
     swipeToDismiss:  PropTypes.bool,
+    useNativeDriver: PropTypes.bool,
   };
 
   static defaultProps = {
     springConfig: { tension: 30, friction: 7 },
     backgroundColor: 'black',
+    useNativeDriver: false,
   };
 
   constructor(props) {
@@ -99,7 +101,7 @@ export default class LightboxOverlay extends Component {
       onPanResponderMove: Animated.event([
         null,
         { dy: this.state.pan }
-      ]),
+      ], { useNativeDriver: props.useNativeDriver }),
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
         if(Math.abs(gestureState.dy) > DRAG_DISMISS_THRESHOLD) {
@@ -115,7 +117,7 @@ export default class LightboxOverlay extends Component {
         } else {
           Animated.spring(
             this.state.pan,
-            { toValue: 0, ...this.props.springConfig }
+            { toValue: 0, useNativeDriver: props.useNativeDriver, ...this.props.springConfig }
           ).start(() => { this.setState({ isPanning: false }); });
         }
       },
@@ -144,7 +146,7 @@ export default class LightboxOverlay extends Component {
 
     Animated.spring(
       this.state.openVal,
-      { toValue: 1, ...this.props.springConfig }
+      { toValue: 1, useNativeDriver: this.props.useNativeDriver, ...this.props.springConfig }
     ).start(() => {
       this.setState({ isAnimating: false });
       this.props.didOpen();
@@ -161,7 +163,7 @@ export default class LightboxOverlay extends Component {
     });
     Animated.spring(
       this.state.openVal,
-      { toValue: 0, ...this.props.springConfig }
+      { toValue: 0, useNativeDriver: this.props.useNativeDriver, ...this.props.springConfig }
     ).start(() => {
       this.setState({
         isAnimating: false,
diff --git a/README.md b/README.md
index 6bc4ffe..67b8bde 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,7 @@ const MyApp = () => (
 |**`backgroundColor`**|`string`|Color of lightbox background, defaults to `black`|
 |**`swipeToDismiss`**|`bool`|Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to `true`.|
 |**`springConfig`**|`object`|[`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) configuration, defaults to `{ tension: 30, friction: 7 }`.|
+|**`useNativeDriver`**|`bool`|Set the useNativeDriver option for all animations (defaults to false)|
 
 ## Demo