React-native: Button component generate warning

[adrienbataille]

Description

Using react native button on iOS create the following warning:

Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`.

Reproduction

Step 1: Add a button in your view,
Step 2: Launch the iOS simulator
Step 3: Click on the button and see the warning.

If it can help, you can find the code here: https://github.com/adrienbataille/test-react-native

Note: I don't have this problem on Android

Solution

After a little investigation, I found the button component is based on TouchableOpacity for iOS and react-native release notes for 0.38.0 mention this commit: https://github.com/facebook/react-native/commit/1bb323e256bb6ad7b9f757368e69cf682f71d7ac.
I don't if it the origin of the problem, but may be it can have an impact, because it works fine with react-native 0.37.0.

Additional Information

• React Native version: 0.38.0
• Platform: iOS
• Operating System: MacOS - Sierra

[sibelius]

@adrienbataille u need to link RCTAnimation in ur xcode

follow this issue: https://github.com/facebook/react-native/issues/10638

[adrienbataille]

@sibelius Thanks!

[heloameneses]

I did what's on issue #10638, even replaced my NativeAnimation folder with the one in the repo but I still get that warning.
I'm using Visual Studio Code and the Xcode simulator.
I replaced files, I didn't understand how to change stuff inside Xcode.

[henrikra]

You need to link RCTAnimation like @sibelius said.

Here is how I did it:

1. find RCTAnimation.xcodeproj The file can be found from node_modules/react-native/NativeAnimation OR node_modules/react-native/Libraries/NativeAnimation
2. open xcode
3. open project navigator (press cmd + 1 OR click folder icon from the left)
4. drag & drop RCTAnimation.xcodeproj from the previous step to Libraries folder
5. Expand RCTAnimation.xcodeproj in project navigator and find libRCTAnimation.a file inside of Products folder
6. click on your project name on top of project navigator and go to Build Phrases tab
7. drag and drop libRCTAnimation.a to Link Binary With Libraries
8. Clean and run :)

I hope this works for you :)

[IlyasAbdighni]

Thank you @henrikra . I solved the problem following your instructions .

[michaelAndersonCampingWorld]

@henrikra I think you have the right solution, except it doesn't work for me.

[TuomaXu]

thanks of all,
after add the libRCTAnimation.a file ,the warning dismiss.

[rgoldiez]

Followed @henrikra steps above and now getting the following error. Any idea what I've done wrong? I'm using RN 0.38.0.

[manishtpatel]

@henrikra, didn't work for me, looks like the solution but didn't work.

[adrienbataille]

@rgoldiez @manishtpatel I've started a blank new project and upgraded it to RN 0.39.0-rc.0 and it works. Native Animation will be part of the next version of RN (https://github.com/facebook/react-native/pull/10783).
Hope it will fix your problem.

[rgoldiez]

@adrienbataille - I'll give 0.39.0-rc.0 a try.

In my case, I can get a clean/new project working with 0.38.0 by manually linking RCTAnimation.xcodeproj and the fall back to JS warning goes away.

The issue I'm running into is with an existing app that I've been building/releasing since 0.14.0 (but have been upgrading along the way). The app has numerous open source repos for things like icons, routing/navigating, etc. On 0.38.0, I now get the fall back to JS warning, which makes sense. However, when I add and link RCTAnimation.xcodeproj, the app will load but it will (seemingly) randomly throw that error when using the app.

EDIT: At least in some (maybe all) cases, it seems to be throwing that error when touching a TouchableOpacity component. If I switch to TouchableHighlight it doesn't crash and responds accordingly (although I don't care for TouchableHighlight in my case).

EDIT 2: This seems to be what's causing my issues: https://github.com/facebook/react-native/commit/8bb707b6869624e4e133f9db7d29d627d9a18290. If I remove the useNativeDriver from TouchableOpacity, the crash I'm experiencing goes away. And I'm not getting the warning that it's falling back to JS for animations.

[heloameneses]

@rgoldiez I'm new to RN, can you please describe how you remove useNativeDriver from TouchableOpacity?

[rgoldiez]

@she-dev - What I did was go to node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js and remove the useNativeDriver...

(see line 90 in RN 0.38.0)...

  setOpacityTo: function(value: number) {
    Animated.timing(
      this.state.anim,
      {toValue: value, duration: 150, useNativeDriver: true}
    ).start();
  },

was edited by me to become
setOpacityTo: function(value: number) { Animated.timing( this.state.anim, {toValue: value, duration: 150} ).start(); },

[janicduplessis]

Not sure what causes that red screen, the steps to link the module are good. What I suggest is if you are having issues with this and can't fix it by linking the NativeAnimation module you can NOT link the module and add this somewhere to ignore the warning until we figure out the issue.

console.ignoredYellowBox = [
  'Animated: `useNativeDriver` is not',
];

[heloameneses]

@rgoldiez No more warnings around here, thank you c:

[knyga]

The correct path for RCTAnimation is ./node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj

[milkers]

@henrikra when I clean the code w.r.t 8th step of your solution above, clean failed and I get this error Unable to run command 'Libtool libRCTAnimation.a' - this target might include its own product.

[henrikra]

Now when RN 0.39 has been released it includes RTCAnimation by default so that will fix this problem by itself :)

[netfish88]

@henrikra I updated my code to RN 0.39. and there is a same warning messages that 'useAnimatedDriver' is not supported. is it sure that the issue has been solved ?

Anyone who solved this issue with 0.39 ?

[janicduplessis]

See https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

[izhwei]

@henrikra I updated to RN 0.39, the same problem is still there.

[levitanong]

@izhwei @netfish88 Make sure you're using ProjectName, and not ProjectNameTest in the targets dropdown. Turns out, I was on ProjectNameTest at some point (because I had to set signing)

[almirfilho]

Updated to RN 0.39 and __the warning message got back__.
RCTAnimation.xcodeproj is already properly linked, and libRCTAnimation.a is included in Link Binary section in Build Phases.

Any ideas? Thanks!

[manishtpatel]

@almirfilho, with 0.39 NativeAnimation folder is moved into libraries, make sure that it is correctly linked to new folder.

[almirfilho]

@manishtpatel yup, it's like that since 0.38 actually, and it was fine in 0.38 =/

[jcollum]

Upgraded to @0.39.1, this warning is still coming up. I think it's an issue in react-native-router-flux though.

[rgoldiez]

@jcollum - I use react-native-router-flux and am not getting the warning. Note that TouchableOpacity uses animations and has been using the nativeDriver for a couple of releases. So if you don't have RCTAnimation linked properly in your project you will get the warning from TouchableOpacity, and likely other components using useNativeDriver.

I too thought I had RCTAnimation linked properly but I still got the warning... it wasn't until I really had it linked properly that the warning went away.

[jcollum]

I too thought I had RCTAnimation linked properly but I still got the warning... it wasn't until I really had it linked properly that the warning went away.

In that case can you point me to the "right" way to do it? I assume there's one in this thread. You can get a direct link in the "x minutes ago" hyperlink.

[rgoldiez]

@jcollum - Did you follow these instructions: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

[jcollum]

That did it! Thanks

[rgoldiez]

@jcollum - glad to hear. I think the inclusion of RCTAnimation in 0.39.x is for new projects created with react-native init. Existing project need to link the library like you've done.

[Rebsos]

I did not follow the instructions above, just upgraded the templates. Fixed the useNativeDriver warning for me

$ react-native upgrade

https://facebook.github.io/react-native/docs/upgrading.html

[henrikra]

Yes that is what I said here before https://github.com/facebook/react-native/issues/11094#issuecomment-264720880 :)

[uriklar]

Here's what solved it for me:
I upgraded from 0.37 to 0.39.2 using react-native upgrade but was still getting the error.
I tried following https://github.com/facebook/react-native/issues/11094#issuecomment-263240420, but on step 5 I couldn't find libRCTAnimation.a but rather libRCTAnimation-tvOS.a

So I went to Build Phases -> Link Binary With Libraries, clicked on the + sign in the bottom, and there under Workspace I found libRCTAnimation.a.

Hope this helps someone...

[siemiatj]

@uriklar the fie is actually located in RCTAnimation.xcodeproj/Products/.

[IvRRimum]

@henrikra Words can't describe how grateful i am for this answer.