Troubleshooting
Initialization issues
Reanimated has four core components that compose its code:
- C++,
- Java,
- JavaScript,
- Reanimated Babel plugin.
All of them are supposed to work correctly only within the same minor version. Therefore, having any of those pieces in your code - directly or indirectly - separate from react-native-reanimated
, especially having any code transpiled with a different version of the aforementioned plugin will result in undefined behavior and errors.
Failed to create a worklet
Problem: This usually happens when Reanimated is not properly installed, e.g. forgetting to include the Reanimated Babel plugin in babel.config.js
.
Solution: See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin for more information.
Native part of Reanimated doesn't seem to be initialized
Problem: This issue happens when Reanimated fails to initialize its native side from JavaScript.
Solution:
- If you recently installed or upgraded Reanimated, make sure to rebuild your app.
- Check if your platform is supported by Reanimated. Currently we support:
- Android
- iOS
- macOS
- tvOS
- visionOS
- Web
- If you are using Reanimated in a brownfield app, make sure to initialize the native library manually.
Using dev bundle in a release app build is not supported
Problem: This happens when you use a release build of your app with a development JavaScript bundle.
Solution: See this post for more information.
Couldn't determine the version of the native part of Reanimated
Problem: This happens when Reanimated fails to determine the version of its native part.
Solution: Check if you have rebuilt your app after upgrading react-native-reanimated
. If you use Expo Go, you must use the exact version which is bundled into Expo SDK.
Mismatch between JavaScript part and native part of Reanimated
Problem: This happens when Reanimated has different versions of its JavaScript and native parts.
Solution: Check if you have rebuilt your app after upgrading react-native-reanimated
. If you use Expo Go, you must use the exact version which is bundled into Expo SDK.
C++ side failed to resolve JavaScript code version
See Couldn't determine the version of the native part of Reanimated.
Mismatch between C++ code version and JavaScript code version
See Mismatch between JavaScript part and native part of Reanimated and Mismatch between JavaScript code version and Reanimated Babel plugin version.
C++ side failed to resolve Java code version
Problem: This happens when Reanimated fails to determine the version of its Java part - most likely because Java part hasn't rebuilt after an upgrade.
Solution: Make sure to rebuild your app and see if the problem persists. If it does, feel free to create an issue on our GitHub.
Mismatch between C++ code version and Java code version
Problem: This happens when Reanimated has different versions of its C++ and Java parts.
Solution: See Native side failed to resolve Java code version.
Java side failed to resolve C++ code version
Problem: This happens when Reanimated fails to determine the version of its C++ part - most likely because for some reason C++ part hasn't rebuilt after an upgrade.
Solution: See Native side failed to resolve Java code version.
Mismatch between Java code version and C++ code version
Problem: This happens when Reanimated has different versions of its Java and C++ parts.
Solution: See Native side failed to resolve Java code version.
Multiple versions of Reanimated were detected
Problem: This error usually happens when in your project exists more than one instance of Reanimated. It can occur when some of your dependency has installed Reanimated inside their own node_modules
instead of using it as a peer dependency. In this case two different versions of Reanimated JavaScript module might try to initialize its native part. You can check which libraries are using Reanimated e.g. with yarn why react-native-reanimated
or npm ls react-native-reanimated
.
Solution: Modify your package.json
file accordingly:
- if you use
yarn
, you should addresolution
property:
"resolutions": {
"react-native-reanimated": <Reanimated version>
}
- if you use
npm
, you should addoverrides
property:
"overrides": {
"react-native-reanimated": <Reanimated version>
}
After that make sure to run your package manager again, either yarn
or npm install
.
Another instance of Reanimated was detected
See Multiple versions of Reanimated were detected.
Outdated version of React Native for New Architecture
Problem: Reanimated supports New Architecture (Fabric) only on the latest minor release of React Native.
Solution: Please upgrade to a newer version of React Native or downgrade to an older version of Reanimated. See the compatibility table for a full list of supported versions of React Native.
Warnings
Reduced motion setting is enabled on this device.
Problem: This warning is displayed to avoid confusion that could arise when Reduced motion is enabled.
Solution: Do nothing, this warning is safe to ignore as it is only displayed in development mode to avoid confusion. If you wish to disable it, you can add the following line to your project's root file:
LogBox.ignoreLogs([
'[Reanimated] Reduced motion setting is enabled on this device.',
]);
See the accessibility overview to learn more about Reduced Motion.
Dependency issues
Unable to find a specification for RNWorklets depended upon by RNReanimated
Problem: This happens when you have installed Reanimated 4 but don't have react-native-worklets
installed as a dependency.
Platform: iOS
Solution: Install react-native-worklets
with your package manager, i.e. yarn add react-native-worklets
or npm i react-native-worklets
. Make sure to install a compatible version of react-native-worklets
for your Reanimated version.
Unable to resolve module react-native-worklets
Problem: This happens when you have installed Reanimated 4 but don't have react-native-worklets
installed as a dependency.
Platform: Web
Solution: Install react-native-worklets
with your package manager, i.e. yarn add react-native-worklets
or npm i react-native-worklets
. Make sure to install a compatible version of react-native-worklets
for your Reanimated version.