Expo 55: [Worklets] Tried to synchronously call a non-worklet function `addListener` on the UI thread.

[oskarnellfors]

Describe the bug
After I updated to Expo 55, I get the error

[Error: [Worklets] Tried to synchronously call a non-worklet function `addListener` on the UI thread.
See https://docs.swmansion.com/react-native-worklets/docs/guides/troubleshooting#tried-to-synchronously-call-a-non-worklet-function-on-the-ui-thread for more details.]

When I render a Carousel.

To Reproduce
Steps to reproduce the behavior:

1. Update to Expo 55
2. Render Carousel
3. See error

Expected behavior
Everything should use Worklets

Versions (please complete the following information):

• react: v19.2.0
• react-native: v0.83.2
• react-native-reanimated: v4.2.1
• react-native-reanimated-carousel: v4.0.2 (same with 5.0.0-beta.5)
• react-native-gesture-handler: v2.30.0

Smartphone (please complete the following information):

• Device: iPhone 17 Pro
• OS: iOS 26.2

Additional context
Tried to update to beta to see if the problem was fixed but I still have the same issue there.

[dosubot]

Hi @oskarnellfors! I'm Dosu and I’m helping the react-native-reanimated-carousel team.

This is a known issue with react-native-reanimated-carousel v4.x when used with newer versions of React Native Reanimated. The error occurs when shared values are read directly during component render, which violates Reanimated v4.x requirements.

Several fixes have been merged into the v5 beta series addressing this:

• PR #866: Fixed pagination components reading reanimated values during render
• PR #878: Fixed race conditions between SharedValues and React state
• PR #875: Upgraded react-native-worklets to fix initialization bugs

Since you mentioned v5.0.0-beta.5 still shows the error, try these steps:

1. Clear cache completely: npx expo start --clear or npx react-native start --reset-cache
2. Delete node_modules and reinstall
3. Rebuild the app from scratch (delete ios/build or android/build folders)

If the issue persists after a clean rebuild, it may be related to your specific Expo 55 + React Native 0.83 + Reanimated 4.2.1 combination being very bleeding-edge. You might want to verify compatibility on the Reanimated compatibility matrix.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[oskarnellfors]

I just tried to remove node_modules then ran npm install again.
Then ran a expo prebuild --clean (clears iOS/android folder) and then npx expo start --clear but I still get the same error when rendering the carousel.

If I comment the carousel out, the build works again.

[oskarnellfors]

The problem might be that this package is using worklets vs 0.5.x and needs to run 0.7.x to support Expo 55 with reanimated 4.2.1? 😬

[benazir46]

Had to downgrade Expo SDK to 54

[Living-Tribunal]

I too and getting this issue with using react-native-draggable-flatlist. if i remove the draggable list it works. I'm on Expo 55

[windywu-synergy]

Receive same error :) Using Expo 55

import {Button, View} from 'react-native';
import Animated, {useSharedValue, withSpring} from 'react-native-reanimated';

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(Math.random() * 100 + 50);
  };

  return (
    <View style={{flex: 1, alignItems: 'center'}}>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: 'violet',
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

*just copy snippet code from this
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation

[lucasroca]

I don’t actually use this library, but I ran into the same issue and ended up here. It was happening even when rendering the basic "first animation" example from Reanimated.

In my case, the culprit was the transform-inline-environment-variables Babel plugin.

Instead of letting it transform all environment variables, I restricted it to only the specific one I need. That fixed the issue.

Hope this helps!

Before:

plugins: [
  ['babel-plugin-react-compiler'], // must run first!
  'transform-inline-environment-variables',
  'react-native-worklets/plugin', // must run last!
],

After:

plugins: [
  ['babel-plugin-react-compiler'], // must run first!
  [
    'transform-inline-environment-variables',
    { include: ['MY_VAR'] },
  ],
  'react-native-worklets/plugin', // must run last!
],

[hssdiv]

For me what was needed is to do "Babel plugin" fix above and start expo (only 1 time) with clean flag:
expo start --dev-client -c
instead of
npx expo start

[diogo-andrade]

I don’t actually use this library, but I ran into the same issue and ended up here. It was happening even when rendering the basic "first animation" example from Reanimated.

In my case, the culprit was the transform-inline-environment-variables Babel plugin.

Instead of letting it transform all environment variables, I restricted it to only the specific one I need. That fixed the issue.

Hope this helps!

Before:

plugins: [
['babel-plugin-react-compiler'], // must run first!
'transform-inline-environment-variables',
'react-native-worklets/plugin', // must run last!
],
After:

plugins: [
['babel-plugin-react-compiler'], // must run first!
[
'transform-inline-environment-variables',
{ include: ['MY_VAR'] },
],
'react-native-worklets/plugin', // must run last!
],

In our project, the cause was also the environment variables transformer. In our case, we used react-native-dotenv. We had to configure it this way:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    overrides: [
      {
        exclude: /node_modules/,
        plugins: [
          [
            'module:react-native-dotenv',
            { path: path.join(process.env.HOME, '/.config/project/.env') },
          ],
        ],
      },
    ],
  };
};

[GollyJer]

In our project, the cause was also the environment variables transformer. In our case, we used react-native-dotenv. We had to configure it this way:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    overrides: [
      {
        exclude: /node_modules/,
        plugins: [
          [
            'module:react-native-dotenv',
            { path: path.join(process.env.HOME, '/.config/project/.env') },
          ],
        ],
      },
    ],
  };
};

I have been fighting this for a couple days and this just worked around it.
Thank you so much for posting. Hopefully this gets fixed at the root level soon.

[duongnguyen17]

The issue was caused by react-native-dotenv being configured in Babel. I removed react-native-dotenv and switched to using react-native-config.

[RikSchefferAmsterdam]

I am experiencing the same, the override adjustment in babel for react-native-dotenv solved it for me