React-native-gifted-chat: Animated: `useNativeDriver` was not specified

[Gaurav453]

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

[rlems]

I think this is an issue with the react-native-lightbox dependency: https://github.com/oblador/react-native-lightbox/pull/131

[rlems]

Actually this seems to be the correct fix: https://github.com/oblador/react-native-lightbox/pull/132

But react-native-lightbox doesn't seem to be maintained anymore, last Pull Request merged was in december. Might be good to upvote: https://github.com/oblador/react-native-lightbox/issues/129

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[georgeMorales]

I also have the same problem, any solution for this?

[tanayuk]

+1

[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

[cristiannietodev91]

I have the same warning in this moment. The app is not crashing but It's an annoying warning

[jeremycod]

+1

[antonioducs]

+1

[NikolasJody]

+1

[standreinmcp]

Having the same issue

[butterfly-valley]

Same issue

[butterfly-valley]

@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 oblador/react-native-lightbox#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

Hey there, care to share the code please?

[Gapur]

I have the same issue
Animated.event now requires a second argument for options

react-native-gifted-chat used this react-native-lightbox lib. Now UseNativeDriver is a required prop for Animated
Unfortunately, the original library seems to be out of maintenance.

[Gapur]

https://github.com/oblador/react-native-lightbox/issues/135

[mioppong]

Go into your npm packages, and search for 'react-native-lightbox', and in LightboxOverlay.js, follow the changes they made from the link below

https://github.com/oblador/react-native-lightbox/pull/132/commits/c80caf0f97eeb5cccb8363d3dfe0a6d62bbcfef9

[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"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.