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?
Advertisement
Answer
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');