How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?

Question

I am working on expo SDK Version: 36, and on all platforms (ios/android/web)

When installing react-navigation for the first time as described in the documentation and running jest --watch while doing it, and the following warning appeared:

    console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
      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`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

It also happen in the browser console:

bundle.js:18272 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`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420 
    in Card (at CardContainer.tsx:132)
    in CardContainer (at CardStack.tsx:499)
    in CardStack (at StackView.tsx:384)
    in KeyboardManager (at StackView.tsx:382)
    in Context.Consumer (at StackView.tsx:380)
    in StackView (at StackView.tsx:41)
    in StackView (at createStackNavigator.tsx:33)
    in Anonymous (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:351)
    in NavigationContainer (at AppCore.js:15)
    in AppCore (at App.js:14)
    in App (at withExpoRoot.web.js:13)
    in ExpoRootComponent (at registerRootComponent.web.js:6)
    in RootComponent
warn @ bundle.js:18272
r @ backend.js:6
shouldUseNativeDriver @ bundle.js:76326
TimingAnimation @ bundle.js:76894
start @ bundle.js:75709
start @ bundle.js:75715
Card._this.animate @ bundle.js:85843
componentDidMount @ bundle.js:85980
commitLifeCycles @ bundle.js:52243
commitLayoutEffects @ bundle.js:55486
callCallback @ bundle.js:30478
invokeGuardedCallbackDev @ bundle.js:30527
invokeGuardedCallback @ bundle.js:30582
commitRootImpl @ bundle.js:55224
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
commitRoot @ bundle.js:55064
finishSyncRender @ bundle.js:54471
performSyncWorkOnRoot @ bundle.js:54449
(anonymous) @ bundle.js:42341
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
flushSyncCallbackQueueImpl @ bundle.js:42336
flushSyncCallbackQueue @ bundle.js:42324
scheduleUpdateOnFiber @ bundle.js:53851
enqueueSetState @ bundle.js:44136
../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
_callee2$ @ bundle.js:1353
tryCatch @ bundle.js:90193
invoke @ bundle.js:90419
prototype.<computed> @ bundle.js:90245
tryCatch @ bundle.js:90193
invoke @ bundle.js:90283
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90318
callInvokeWithMethodAndArg @ bundle.js:90317
enqueue @ bundle.js:90340
prototype.<computed> @ bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
_callee2 @ bundle.js:1324
SplashScreen @ bundle.js:1537
constructClassInstance @ bundle.js:44346
updateClassComponent @ bundle.js:48555
beginWork$1 @ bundle.js:50328
beginWork$$1 @ bundle.js:55898
performUnitOfWork @ bundle.js:54837
workLoopSync @ bundle.js:54813
performSyncWorkOnRoot @ bundle.js:54412
(anonymous) @ bundle.js:42341
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
flushSyncCallbackQueueImpl @ bundle.js:42336
flushSyncCallbackQueue @ bundle.js:42324
scheduleUpdateOnFiber @ bundle.js:53851
enqueueSetState @ bundle.js:44136
../../../react/cjs/react.development.js.Component.setState @ bundle.js:88125
onFinish @ bundle.js:1392
_callee$ @ bundle.js:18446
tryCatch @ bundle.js:90193
invoke @ bundle.js:90419
prototype.<computed> @ bundle.js:90245
tryCatch @ bundle.js:90193
invoke @ bundle.js:90283
(anonymous) @ bundle.js:90293
Promise.then (async)
invoke @ bundle.js:90292
(anonymous) @ bundle.js:90318
callInvokeWithMethodAndArg @ bundle.js:90317
enqueue @ bundle.js:90340
prototype.<computed> @ bundle.js:90245
../../../regenerator-runtime/runtime.js.exports.async @ bundle.js:90364
_callee @ bundle.js:18389
componentDidMount @ bundle.js:18470
commitLifeCycles @ bundle.js:52243
commitLayoutEffects @ bundle.js:55486
callCallback @ bundle.js:30478
invokeGuardedCallbackDev @ bundle.js:30527
invokeGuardedCallback @ bundle.js:30582
commitRootImpl @ bundle.js:55224
unstable_runWithPriority @ bundle.js:92068
runWithPriority$2 @ bundle.js:42291
commitRoot @ bundle.js:55064
finishSyncRender @ bundle.js:54471
performSyncWorkOnRoot @ bundle.js:54449
scheduleUpdateOnFiber @ bundle.js:53840
updateContainer @ bundle.js:57245
(anonymous) @ bundle.js:57670
unbatchedUpdates @ bundle.js:54575
legacyRenderSubtreeIntoContainer @ bundle.js:57669
render @ bundle.js:57750
renderApplication @ bundle.js:65334
run @ bundle.js:65227
runApplication @ bundle.js:65266
registerRootComponent @ bundle.js:18777
../../../expo/AppEntry.js @ bundle.js:14474
__webpack_require__ @ bundle.js:727
fn @ index.js:69
0 @ bundle.js:101987
__webpack_require__ @ bundle.js:727
(anonymous) @ bundle.js:794
(anonymous) @ bundle.js:797
Show 40 more frames
[Violation] 'requestAnimationFrame'

Related issues:

• https://github.com/expo/ex-navigation/issues/276
• https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

The last one offers a solution, but it says to open Xcode, while I am on Linux Debian 10. I do not have Xcode. I can use a Macbook and do the step but I am wondering:

• Should I care when working on Linux?
• Should I care when working on Macbook (if it happens)?
• Should I care for the health of my app while testing? Under which circumstances?

Solution 1

to disable this warning

add

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

or

jest.mock('NativeAnimatedHelp');

to your test file

I'll show you how I do it

I write in package.json file

"jest": {
    "setupFiles": [
      "./mock.js"
    ],

In file mock.js

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
jest.mock('NativeAnimatedHelp');

Solution 2

You can safely ignore this warning. useNativeDriver is only important when running the code on device.

Solution 3

Nothing above wasn't working for me, but eventually I've found solution here:

1. create jest-setup.js file (in my case in src/tests directory):

src/tests/jest-setup.js:

import 'react-native-gesture-handler/jestSetup';

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});

2. Install necessary packages (in my case react-native-reanimated only, but maybe your code will ask you something else):

npm install --save-dev react-native-reanimated

3. Add one row to jest config in package.json:

  "jest": {
    "setupFiles": [
      "<rootDir>/src/tests/jest-setup.js"
    ]
  },

If your jest-setup.js file located in other directory - change location accordingly.

After these simple steps, the annoying warning has gone. Thanks Spencer Carli and his article by link above.