TheWidlarzGroup / react-native-notificated

⚡️React Native toast notifications
https://thewidlarzgroup.github.io/react-native-notificated/
MIT License
354 stars 17 forks source link

[BUG] animationConfig broken using reanimated v3 #226

Closed erickreutz closed 7 months ago

erickreutz commented 8 months ago

When using react-native-notificated with react-native-reanimated v3 (in my case ~3.3.0) when using AnimationBuilder or importing any animation config such as ZoomInDownZoomOutUp results in the below error:

ReanimatedError: Trying to access property `transitionInStyles` of an object which cannot be sent to the UI runtime., js engine: reanimated

UPDATE After further digging I think the problem is AnimationBuilder and passing classes vs objects over to the native renanimated JS runtime - for example, if I pass an animation config object to animationConfig then it seems to work but typescript will not like the type.

PdoubleU commented 8 months ago

Hi @erickreutz , thanks for bringing it up. I'll take a look at this bug.

Meanwhile, can you give me more details about your project package setup? I want to recreate the bug with almost the same setup as yours. Just packages like React Native, TS, gesture handler, etc.

erickreutz commented 8 months ago

Sure thing! Here is the package.json of my test app that crashed.

{
  "name": "my-test-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~49.0.15",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-notificated": "^0.1.2",
    "react-native-reanimated": "^3.5.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}
PdoubleU commented 7 months ago

Hi @erickreutz, thank you so much for your contribution to the project - the precise description helped me very much; and sorry that the fix took so long (unfortunately OSS is done in spare time ⏳). The bug is tricky; long story short: reanimated v3 checks the content of its hook useAnimationStyles - and the class can't be destructured to variables inside it. You can go ahead with our library in v0.1.4, which solves this issue. I wish you good coding time :)