ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function on the UI thread

[AbdulmalekAlshugaa]

Description

I know this error is already reported in ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function on the UI thread but it still appears on "react-native-reanimated": "~3.6.2", this issues appears once I upgraded from expo 49 to 50 . I tried to set runOnJS like this `const scrollHandler = useAnimatedScrollHandler( { onScroll: event => { if (isSelecting) return;

    const currentOffset = event.contentOffset.y;

    if (!showStickyHeader && currentOffset >= stickyHeaderOffset) {
      runOnJS(setShowStickyHeader)(true);
      opacity.value = withTiming(1, { duration: timing.veryQuick });
      return;
    }

    if (showStickyHeader && currentOffset < stickyHeaderOffset) {
      runOnJS(setShowStickyHeader)(false);
      opacity.value = withTiming(0, { duration: timing.veryQuick });
    }

    if (lastContentOffset.value > event.contentOffset.y && isScrolling.value && hideBottomBar) {
      runOnJS(setHideBottomBar)(false);
    } else if (lastContentOffset.value < event.contentOffset.y && isScrolling.value && !hideBottomBar) {
      runOnJS(setHideBottomBar)(true);
    }
    lastContentOffset.value = event.contentOffset.y;
  },
  onBeginDrag: () => {
    isScrolling.value = true;
  },
  onEndDrag: () => {
    isScrolling.value = false;
  },
},
[isSelecting, showStickyHeader, hideBottomBar, stickyHeaderOffset],

);`

My package json { "name": "hello-chef-consumer", "version": "0.17.27", "private": true, "scripts": { "compile": "tsc --noEmit -p . --pretty", "format": "prettier --write \"app/*/.{js,jsx,json,md,ts,tsx}\"", "lint": "eslint App.js app test --fix --ext .js,.ts,.tsx && npm run format", "test": "jest", "test:watch": "jest --watch", "start": "expo start -c", "start:prod": "expo start --no-dev --minify -c", "web": "expo start --web", "android": "eas build:run -p android", "ios": "eas build:run -p ios", "android:local.release": "npx expo run:android --variant release", "ios:local.release": "npx expo run:ios --variant release", "expo:start": "expo start", "eas:build.dev.sim": "eas build --profile development-simulator --platform ios", "eas:build.dev.device": "eas build --profile development --platform all", "eas:build.dev.android": "eas build --profile development --platform android", "eas:build.staging.sim": "eas build --profile staging-simulator --platform ios", "eas:build.staging.device": "eas build --profile staging --platform all", "eas:device.create": "eas device:create", "prestart": "yarn storybook-generate", "storybook-generate": "sb-rn-get-stories", "storybook-watch": "sb-rn-watcher", "storybook": "sb-rn-get-stories && cross-env APP_ENV=storybook expo start --port 1996 --dev-client" }, "dependencies": { "@braze/expo-plugin": "^2.1.0", "@braze/react-native-sdk": "^9.2.0", "@cloudinary/url-gen": "^1.9.1", "@expo-google-fonts/poppins": "^0.2.3", "@expo/webpack-config": "^19.0.0", "@gorhom/bottom-sheet": "^4.5.1", "@intercom/intercom-react-native": "^7.1.2", "@react-native-async-storage/async-storage": "1.18.2", "@react-native-community/datetimepicker": "7.7.0", "@react-native-community/slider": "4.4.2", "@react-native-cookies/cookies": "^6.2.1", "@react-navigation/bottom-tabs": "^6.3.2", "@react-navigation/native": "~6.0.1", "@react-navigation/native-stack": "^6.0.2", "@react-navigation/stack": "~6.2.1", "@segment/analytics-react-native": "^2.13.1", "@segment/sovran-react-native": "^0.4.5", "@sentry/react-native": "~5.20.0", "@shopify/flash-list": "1.6.3", "apisauce": "2.1.6", "babel-plugin-module-resolver": "^5.0.2", "date-fns": "^2.29.3", "date-fns-tz": "^2.0.0", "expo": "^50.0.19", "expo-apple-authentication": "~6.3.0", "expo-application": "~5.8.4", "expo-auth-session": "~5.4.0", "expo-blur": "~12.9.2", "expo-build-properties": "~0.11.1", "expo-constants": "~15.4.6", "expo-dev-client": "~3.3.12", "expo-device": "~5.9.4", "expo-file-system": "~16.0.9", "expo-font": "~11.10.3", "expo-haptics": "~12.8.1", "expo-linking": "~6.2.2", "expo-localization": "~14.8.4", "expo-notifications": "~0.27.8", "expo-random": "~13.6.0", "expo-splash-screen": "~0.26.5", "expo-status-bar": "~1.11.1", "expo-tracking-transparency": "~3.3.0", "expo-updates": "~0.24.13", "expo-web-browser": "~12.8.2", "i18n-js": "3.9.2", "jwt-decode": "^3.1.2", "lodash.merge": "^4.6.2", "lodash.upperfirst": "^4.3.1", "lottie-react-native": "6.5.1", "mobx": "6.10.2", "mobx-react-lite": "4.0.5", "mobx-state-tree": "5.2.0", "react": "18.2.0", "react-native": "0.73.6", "react-native-bootsplash": "4.5.2", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "~2.14.0", "react-native-get-random-values": "~1.8.0", "react-native-jsx-parser": "^1.0.1", "react-native-reanimated": "~3.6.2", "react-native-root-toast": "^3.4.1", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-smartlook-analytics": "^2.1.11", "react-native-svg": "14.1.0", "react-native-toast-message": "^2.1.6", "react-native-webview": "13.6.4", "reactotron-mst": "3.1.4", "reactotron-react-js": "^3.3.8", "reactotron-react-native": "5.0.3", "sentry-expo": "~7.2.0", "statsig-react-native-expo": "4.6.1" }, "devDependencies": { "@babel/core": "^7.23.9", "@babel/plugin-proposal-decorators": "7.23.9", "@babel/plugin-proposal-optional-catch-binding": "7.18.6", "@babel/preset-env": "^7.23.9", "@babel/runtime": "^7.23.9", "@expo/ngrok": "^4.1.0", "@storybook/addon-actions": "^6.5.14", "@storybook/addon-controls": "^6.5.14", "@storybook/addon-ondevice-actions": "^6.5.1", "@storybook/addon-ondevice-controls": "^6.5.1", "@storybook/react-native": "^6.5.1", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "^12.4.3", "@types/i18n-js": "3.8.2", "@types/jest": "29.5.11", "@types/react": "~18.2.14", "@types/react-native": "^0.73.0", "@typescript-eslint/eslint-plugin": "6.20.0", "@typescript-eslint/parser": "6.20.0", "babel-jest": "29.7.0", "babel-loader": "9.1.3", "cross-env": "^7.0.3", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-n": "^16.6.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-native": "^4.1.0", "jest": "^29.2.1", "jest-circus": "29.7.0", "jest-environment-jsdom": "^29.7.0", "jest-expo": "~50.0.4", "plop": "^3.1.2", "prettier": "3.2.4", "react-devtools-core": "4.28.4", "react-dom": "18.2.0", "react-native-web": "~0.19.6", "react-test-renderer": "18.2.0", "reactotron-core-client": "^2.8.13", "typescript": "^5.3.3" }, "resolutions": { "@expo/config-plugins": "7.9.2" }, "expo": { "install": { "exclude": [ "@react-native-async-storage/async-storage" ] } }, "engines": { "node": ">=18.0.0 <21.1.0" } }

Steps to reproduce

1. upgrade from expo 49 to 50
2. use "react-native-reanimated": "~3.6.2",
3. and the issue will appears

Snack or a link to a repository

https://github.com/software-mansion/react-native-reanimated/issues/5541

Reanimated version

3.6.2

React Native version

0.73.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo Go

Architecture

None

Build type

Release app & dev bundle

Device

Android emulator

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?

[tomekzaw]

Please upgrade react-native-reanimated to latest version (currently 3.12.1).

Recently, we extended this particular message with function name, so you'll be able to see which non-workletized function is invoked from the worklet runtime.

[szydlovsky]

More information and some tips on fixing it can be found in our docs on troubleshooting page.

[szydlovsky]

@AbdulmalekAlshugaa did the tips help anyhow?