Debian Question posted in
The oficial documentation can be found here.

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

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:

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?
Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    To disable this warning add either of the following to your test file.

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

    or

    jest.mock('NativeAnimatedHelp');

    In your package.json file

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

    In mock.js

    jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
jest.mock('NativeAnimatedHelp');
    Login or Signup to reply.
  3. 0

    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;
});
    1. 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
    1. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search