Reanimated throw exception at all calling after upgrading to expo SDK 50. ReanimatedError: Exception in HostFunction: <unknown>, js engine: reanimated

[alexandreandriesse]

Description

Reanimated doesn't work anymore after upgraded my expo react native code base to sdk 50.

I followed all the required breacking change steps. All worked fine before the upgrade. Now, reanimated throw me this exception 31 times at the first render. "ReanimatedError: Exception in HostFunction: , js engine: reanimated".

I tried fixing deps, reinstalling node modules, fixing babel, metro etc... build and rebuild, clearing cache each time. Nothing work.

I tried to dismiss all the error, to understand the problem and, each time I do an action on the UI that should trigger an animation (of reanimated), it throw the same exception I gave above. Same behavior and same error for all types of reanimated animation (entering, exiting, sharedValue, animatedStyle...).

My babel.config

module.exports = function (api) { api.cache(true); return { presets: [ ["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel", ], plugins: ["react-native-reanimated/plugin"], }; };

my metro.config

// Learn more https://docs.expo.io/guides/customizing-metro const { getDefaultConfig } = require("expo/metro-config"); const { withNativeWind } = require("nativewind/metro");

module.exports = withNativeWind( (() => { /* @type {import('expo/metro-config').MetroConfig} / const config = getDefaultConfig(__dirname, { // [Web-only]: Enables CSS support in Metro. });

const { transformer, resolver } = config;

config.transformer = {
  ...transformer,
  babelTransformerPath: require.resolve("react-native-svg-transformer"),
};
config.resolver = {
  ...resolver,
  assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
  sourceExts: [...resolver.sourceExts, "svg"],
};

return config;

})(), { input: "./global.css" } );

and my package.json

{ "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "^14.0.0", "@react-native-community/slider": "4.4.2", "@react-native-masked-view/masked-view": "0.3.0", "@react-navigation/drawer": "^6.6.6", "@react-navigation/native": "^6.0.2", "@shopify/flash-list": "1.6.3", "@supabase/supabase-js": "^2.36.0", "@tanstack/react-query": "^5.0.5", "babel-plugin-module-resolver": "^5.0.0", "base64-arraybuffer": "^1.0.2", "dayjs": "^1.11.9", "expo": "^50.0.7", "expo-application": "~5.8.3", "expo-blur": "~12.9.2", "expo-build-properties": "~0.11.1", "expo-calendar": "~12.2.1", "expo-clipboard": "~5.0.1", "expo-constants": "~15.4.5", "expo-crypto": "~12.8.1", "expo-dev-client": "~3.3.8", "expo-device": "~5.9.3", "expo-file-system": "~16.0.6", "expo-font": "~11.10.3", "expo-image-picker": "~14.7.1", "expo-linear-gradient": "~12.7.2", "expo-linking": "~6.2.2", "expo-localization": "~14.8.3", "expo-location": "~16.5.3", "expo-notifications": "~0.27.6", "expo-router": "~3.4.7", "expo-splash-screen": "~0.26.4", "expo-status-bar": "~1.11.1", "expo-store-review": "~6.8.3", "expo-system-ui": "~2.9.3", "expo-updates": "~0.24.11", "expo-web-browser": "~12.8.2", "iconoir-react-native": "^7.0.1", "lodash": "^4.17.21", "lottie-react-native": "6.5.1", "nativewind": "^4.0.1", "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.73.4", "react-native-calendars": "^1.1301.0", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "~2.14.0", "react-native-maps": "1.10.0", "react-native-mmkv": "^2.10.2", "react-native-pager-view": "6.2.3", "react-native-photo-manipulator": "^1.2.7", "react-native-progress": "^5.0.1", "react-native-reanimated": "~3.6.2", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", "react-native-url-polyfill": "^2.0.0", "react-native-webview": "13.6.4", "zustand": "^4.4.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/lodash": "^4.14.202", "@types/react": "~18.2.45", "@types/react-native": "^0.73.0", "@types/react-native-vector-icons": "^6.4.15", "jest": "^29.2.1", "jest-expo": "~50.0.2", "react-native-svg-transformer": "^1.2.0", "react-test-renderer": "18.2.0", "tailwindcss": "^3.4.1", "typescript": "^5.3.0" }, "overrides": {}, "resolutions": {}, "private": true }

Steps to reproduce

Upgrading an existing react native app from expo sdk 49 to 50.

Snack or a link to a repository

.

Reanimated version

3.6.2

React Native version

0.73.4

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[hubingkang]

I had the same problem

[alexandreandriesse]

I migrated the entire code base in a new one. The problem remained.

But I found my problem :

The use of transformOrigin: "bottom" in a useAnimatedStyle caused the crash of all other animations.

const style = useAnimatedStyle(() => { return { transformOrigin: "bottom" // <= this one guy there cause the unknown reanimated exceptions }, []);

[hubingkang]

Re-follow the documentation and install successfully https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

[mrsiclorena12]

Facing the same issue, instructions from reanimated documentation did not work for me

[Karan-Dhingra]

Same with me, can anyone help ??

[Wari-Dudafa]

You dont need to add 'react-native-reanimated/plugin', to your confg anymore im pretty sure, removed it and it worked for me https://docs.expo.dev/versions/latest/sdk/reanimated/