[Bug]: Sortable.Handle throws "Cannot copy value of type SyntheticEvent" with Expo SDK 57

[V0V45]

Description

After upgrading to Expo SDK 57, I got the following error:

 ERROR  [Error: [Worklets] Cannot copy value of type `SyntheticEvent`.] 

Code: serializable.native.ts
  210 |     (value as { constructor?: { name?: string } })?.constructor?.name ||
  211 |     'unknown';
> 212 |   throw new Error(
      |                  ^
  213 |     `[Worklets] Cannot copy value of type \`${constructorName}\`.`
  214 |   );
  215 | }
Call Stack
  createSerializable (node_modules/react-native-worklets/src/memory/serializable.native.ts:212:18)
  value.map$argument_0 (node_modules/react-native-worklets/src/memory/serializable.native.ts:387:23)
  map (<native>)
  cloneArray (node_modules/react-native-worklets/src/memory/serializable.native.ts:386:35)
  createSerializable (node_modules/react-native-worklets/src/memory/serializable.native.ts:139:22)
  scheduleOnUI (node_modules/react-native-worklets/src/threads.native.ts:103:23)
  apply (<native>)
  <anonymous> (node_modules/react-native-worklets/src/threads.native.ts:145:17)
  executeDispatch (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:734:17)
  run (<native>)
  runWithFiberInDEV (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:697:33)
  executeDispatchesAndReleaseTopLevel (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1247:34)
  call (<native>)
  forEachAccumulated (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:975:67)
  batchedUpdates$1$argument_0 (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1291:29)
  batchedUpdatesImpl (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:18891:18)
  batchedUpdates$1 (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1216:34)
  dispatchEvent (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:1266:23)

This error exist only with Sortable.Grid with customHandle when wrapping some button into <Sortable.Handle>. Updated versions of packages:

    "expo": "^57.0.1",
    "expo-blur": "~57.0.0",
    "expo-constants": "~57.0.2",
    "expo-document-picker": "~57.0.0",
    "expo-file-system": "~57.0.0",
    "expo-font": "~57.0.0",
    "expo-haptics": "~57.0.0",
    "expo-image": "~57.0.0",
    "expo-image-picker": "~57.0.1",
    "expo-linear-gradient": "~57.0.0",
    "expo-linking": "~57.0.1",
    "expo-localization": "~57.0.0",
    "expo-notifications": "~57.0.2",
    "expo-router": "~57.0.2",
    "expo-sharing": "~57.0.1",
    "expo-splash-screen": "~57.0.1",
    "expo-sqlite": "~57.0.0",
    "expo-status-bar": "~57.0.0",
    "expo-symbols": "~57.0.0",
    "expo-system-ui": "~57.0.0",
    "expo-web-browser": "~57.0.0",
    "react-native": "0.86.0",
    "react-native-gesture-handler": "~2.32.0",
    "react-native-keyboard-controller": "1.21.9",
    "react-native-reanimated": "4.5.0",
    "react-native-worklets": "0.10.0",
    "react-native-sortables": "^1.9.4",

Steps to reproduce

1. Update packages.
2. Create Sortable.Grid component with customHandle prop enabled.
3. Wrap some button inside renderItem prop into <Sortable.Handle>.

Code snippet, Snack or GitHub repository link

      <Animated.ScrollView
        ref={scrollableRef}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.listContent}
        onScroll={onScroll}
      >
        <Sortable.Grid
          columns={1}
          data={exercises}
          overDrag="vertical"
          customHandle
          keyExtractor={(item) => String(item.id)}
          dragActivationDelay={100}
          scrollableRef={scrollableRef}
          onDragStart={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
          }}
          onDragEnd={(result) => {
            const { fromIndex, toIndex } = result;
            if (fromIndex === toIndex) return;
            const newExercises = [...exercises];
            const [movedItem] = newExercises.splice(fromIndex, 1);
            newExercises.splice(toIndex, 0, movedItem);
            reorderExercises(newExercises);
          }}
          renderItem={({ item }) => (
            <View
              style={{ flexDirection: "row", justifyContent: "space-between" }}
            >
              <Text>{item.name}</Text>
              <Sortable.Handle>
                <IconButton icon="drag" />
              </Sortable.Handle>
            </View>
          )}
        />
      </Animated.ScrollView>

React Native Sortables version

1.9.4

Reanimated version

4.5.0

React Native Gesture Handler version

2.32.0

React Native version

0.86.0

Platforms

Android

Architecture

Fabric (New Architecture)

Workflow

Expo Dev Client

Device

Android emulator

Acknowledgements

Yes

[burkayanduv]

+1, same crash with the same stack (Expo 57, RN 0.86, reanimated 4.5, worklets 0.10). The fix is already merged on main in #566 (commit 828c6d6). I vendored main locally and confirmed it resolves the crash on iOS. Could a new release be published with it? All Expo 57 users are likely blocked on this. Thanks for the work!

[Kavakliyski]

Ran into the same thing after updating to worklets 0.10 (reanimated 4.5). The fix from #566 solves it. I patched the two onLayout: runOnUI(...) spots locally (CustomHandle and PortalOutletProvider) and the error is gone.

Latest on npm is still 1.9.4 which doesn't include #566, so everyone on worklets 0.10 hits this.

[MatiPl01]

The fix from #566 will be included in the next release, which I'll try to publish over the weekend. For now, you can use the attached patch:

react-native-sortables+1.9.4.patch

[morepriyam]

was here for the same xD GG

[outaTiME]

Hi @MatiPl01 👋 were you able to sort out the npm issue? And do you have plans to publish a new release soon?

I updated to react-native-reanimated ^4.5.2 and react-native-worklets ^0.11.0, and unfortunately the error still persists.

Thanks! 🙏

[morepriyam]

@outaTiME wym his last comment suggest the patch and its fixed already it's a minor bug

[outaTiME]

I'm aware of the patch. My question was specifically about a proper release — I'd rather not keep a patch in the repo if a new version is around the corner.