Animated: `useNativeDriver` was not specified

Issue Description

I am getting this warn in React-native-gifted-chat while rendring Image in the chat screen,that Animated: useNativeDriver was not specified and animations for opening and closing image are also not working as expected

Steps to Reproduce / Code Snippets

1. Just make a new project with given code in Readme.MD file of this repo
2. install dependencies and start project
3. try to reder image in chat screen by adding a img key in the message object
4. Run the project

Expected Results

Animations should run fine without any warn

Additional Information

• Nodejs version: 12.6.3
• React version: 16.11.0
• React Native version: 0.62.0
• react-native-gifted-chat version: 0.16.1
• Platform(s) (iOS, Android, or both?): Android

[hungvu193]

So I resolved my issue:

1. Install patch-package: npm install -g patch-package
2. In your root of project create a folder name patches and inside patches folder create a file with name: react-native-lightbox+0.8.1.patch with the following content:

diff --git a/node_modules/react-native-lightbox/LightboxOverlay.js b/LightboxOverlay.js
index 9e01f9a..d093b44 100644
--- a/node_modules/react-native-lightbox/LightboxOverlay.js
+++ b/node_modules/react-native-lightbox/LightboxOverlay.js
@@ -99,7 +99,7 @@ export default class LightboxOverlay extends Component {
       onPanResponderMove: Animated.event([
         null,
         { dy: this.state.pan }
-      ]),
+      ], { useNativeDriver: false }),
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
         if(Math.abs(gestureState.dy) > DRAG_DISMISS_THRESHOLD) {
@@ -115,7 +115,7 @@ export default class LightboxOverlay extends Component {
         } else {
           Animated.spring(
             this.state.pan,
-            { toValue: 0, ...this.props.springConfig }
+            { toValue: 0, useNativeDriver: false, ...this.props.springConfig }
           ).start(() => { this.setState({ isPanning: false }); });
         }
       },
@@ -144,7 +144,7 @@ export default class LightboxOverlay extends Component {
 
     Animated.spring(
       this.state.openVal,
-      { toValue: 1, ...this.props.springConfig }
+      { toValue: 1, useNativeDriver: false, ...this.props.springConfig }
     ).start(() => {
       this.setState({ isAnimating: false });
       this.props.didOpen();
@@ -161,7 +161,7 @@ export default class LightboxOverlay extends Component {
     });
     Animated.spring(
       this.state.openVal,
-      { toValue: 0, ...this.props.springConfig }
+      { toValue: 0, useNativeDriver: false, ...this.props.springConfig }
     ).start(() => {
       this.setState({
         isAnimating: false,

1. After that run the command: patch-package.

You can also add it to postinstall inside package.json so that You dont have to be repeated every time node_modules is removed. This is my favorite command:

    "update:pods": "cd ios && pod install --repo-update && cd .. && patch-package",
    "postinstall": "yarn run update:pods"

[rlems]

@georgeMorales What I did to solve this was copy the Lightbox and LightboxOverlay components from https://github.com/oblador/react-native-lightbox into my own project and add the useNativeDriver options like in https://github.com/oblador/react-native-lightbox/pull/132. After that I used the renderMessageImage property of GiftedChat to render my custom Lightbox implementation. You can use the GiftedChat code here to see how: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageImage.tsx