Cannot convert undefined or null to object

[anasvemmully]

my app is working fine for almost 2 months, suddenly for 4-5 days before I go this issue scavenging for a solution. This is the version I currently using

npm ls react-native-reanimated
[email protected]

my package.json

"dependencies": {
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-community/audio-toolkit": "^2.0.3",
    "@react-native-community/checkbox": "^0.5.16",
    "@react-native-community/netinfo": "^9.4.1",
    "@react-native-community/push-notification-ios": "^1.11.0",
    "@react-native-community/slider": "^4.4.3",
    "@react-native-firebase/analytics": "^18.4.0",
    "@react-native-firebase/app": "^18.4.0",
    "@react-native-firebase/dynamic-links": "^18.4.0",
    "@react-native-firebase/remote-config": "^18.4.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-masked-view/masked-view": "^0.2.9",
    "@react-native-picker/picker": "^2.5.0",
    "@react-navigation/bottom-tabs": "^7.0.0-alpha.3",
    "@react-navigation/native": "^7.0.0-alpha.3",
    "@react-navigation/native-stack": "^7.0.0-alpha.3",
    "@sentry/react-native": "5.26.0",
    "@sparkfabrik/react-native-idfa-aaid": "^1.1.0",
    "axios": "^0.21.1",
    "colyseus.js": "^0.14.13",
    "lodash": "^4.17.21",
    "lottie-react-native": "^5.1.4",
    "react": "^18.2.0",
    "react-native": "^0.72.4",
    "react-native-android-open-settings": "^1.3.0",
    "react-native-animatable": "^1.3.3",
    "react-native-autoheight-webview": "^1.6.5",
    "react-native-background-timer": "^2.2.0",
    "react-native-blob-util": "^0.16.2",
    "react-native-calculator": "^0.5.2",
    "react-native-calendars": "^1.1284.0",
    "react-native-collapsible-tab-view": "^7.0.1",
    "react-native-contacts": "^5.1.0",
    "react-native-device-info": "^10.9.0",
    "react-native-fbsdk-next": "^10.0.0",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-iap": "^12.15.1",
    "react-native-keep-awake": "^4.0.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-math": "^1.2.0",
    "react-native-minimize": "^1.0.12",
    "react-native-onesignal": "^4.4.1",
    "react-native-orientation-locker": "^1.2.0",
    "react-native-otp-verify": "^1.1.8",
    "react-native-pager-view": "^6.2.3",
    "react-native-pdf": "^6.6.2",
    "react-native-play-install-referrer": "^1.1.8",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "^3.5.2",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.25.0",
    "react-native-screenshot-prevent": "^1.1.7",
    "react-native-share": "^10.2.1",
    "react-native-simple-toast": "^1.1.2",
    "react-native-snap-carousel": "^4.0.0-beta.6",
    "react-native-sound-player": "^0.10.4",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^7.0.3",
    "react-native-svg-charts": "^5.4.0",
    "react-native-swipe-gestures": "^1.0.5",
    "react-native-swiper-flatlist": "^3.2.3",
    "react-native-tab-view": "^3.5.2",
    "react-native-tracking-transparency": "^0.1.2",
    "react-native-video": "^5.2.1",
    "react-native-view-shot": "^3.8.0",
    "react-native-webp-format": "^1.1.2",
    "react-native-webview": "^11.23.1",
    "react-native-youtube": "^2.0.2",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "socket.io-client": "^3.1.1"
  },

what could have went wrong, any idea? I usually clean node_modules and reinstall them, so I thought this may be the issue form the latest version, so I thought asking here!

[MatiPl01]

Hey!

What is component variable? Do you execute this code in the UI thread inside a worklet function?
It looks like your object might be impossible to clone to the native side but it's hard to tell without a repro.

If it's possible, can you share a code snippet that causes the issue?

[MatiPl01]

Hey. Thanks for clarification. I saw that the same code as you included in your screenshot is in the reanimated source code but it is used only for web layout animations - you shouldn't see this crash in the mobile app.

Did you only upgrade react-native-reanimated library or you made some other changes before the app started to show this error?

[anasvemmully]

It's actually using the latest version 3.14.0 when checked using npm ls react-native-reanimated. Just tweaked the minimum SDK version from 33 to 34 and the kotlin version for react-native-video v6 other than nothing else. But this was two weeks ago, and that's why I thought it might be something with th RNR the latest versions release.

[anasvemmully]

@MatiPl01
its hard for me to create, i didnt see a problem, but can anyone tell me why component is a number rather than object. in node_modules/react-native-reanimated/src/js-reanimated/index.ts @ line 61

[anasvemmully]

i just added a type check for removing null @ line 86

} else if (component.props && Object.keys(component.props).length > 0) {

thats when i got
TypeError: Cannot use 'in' operator to search for 'className' in 1223

any chance, why this?

[MatiPl01]

Hey. Sorry for long time without response. It looks like an issue with animated style somewhere in your app. Can you share code snippets showing how you use useAnimatedStyle hook and to which components do you pass the returned style by this hook?

I wonder why it looks for className. Do you pass className to any of your animated components or use nativewind and try to animate the className prop?