[Bug]: Support react-native-reanimated 4.4.0

[faljabi]

Description

Hi,

After upgrading react-native-reanimated and worklets, it seems there is a bug where sometimes the Sortable.Grid does not render the items until I scroll.

Video attached for reference. I am following almost exactly this example https://react-native-sortables-docs.vercel.app/grid/examples/auto-scroll

ScreenRecording_06-01-2026.15-50-29_1.MP4

Steps to reproduce

1. Upgrade react-native-reanimated 4.4.0 and Gesture handler to 3.0.0

Code snippet, Snack or GitHub repository link

https://videoattached.com

React Native Sortables version

1.9.4

Reanimated version

4.4.0

React Native Gesture Handler version

3.0.0

React Native version

0.85.3

Platforms

iOS

Architecture

Fabric (New Architecture)

Workflow

React Native Bare Workflow

Device

Real device

Acknowledgements

Yes

[artem-kliuev]

@faljabi as a tmp workaround, you can use this patch package. I created it for myself when I had the same problem.

react-native-sortables+1.9.4.patch

[outaTiME]

I'm experiencing the same bug, but unlike the original report it only affects Android — iOS renders fine for me. Same symptom: Sortable.Grid items don't appear until the first scroll, then they show up.

Worth noting we reproduce it with a different react-native-gesture-handler version, so the issue likely isn't tied to gesture-handler 3.0.0.

Stack:

• react-native-sortables: 1.9.4
• react-native-reanimated: 4.4.0
• react-native-worklets: 0.9.x
• react-native-gesture-handler: 2.31.2
• react-native: 0.83.x (Expo SDK 55)
• Architecture: Fabric
• Platform affected: Android only (iOS works fine)

Workaround: rolling back deps to a known-good combo unblocks Android:

"react-native-reanimated": "~4.3.1",
"react-native-worklets": "~0.8.3"

Will switch back once a fix lands on the 4.4.x line. Thanks for the tracking.

[LagBug]

+1

[efstathiosntonas]

This fixed it for me:

react-native-sortables@1.9.4.patch:

diff --git a/dist/module/providers/shared/hooks/useItemLayout.js b/dist/module/providers/shared/hooks/useItemLayout.js
index 97aa96492a5546857a31266fbec731050e202d51..dd09b39065d78be8a762ae4f5d65aafc52b3088b 100644
--- a/dist/module/providers/shared/hooks/useItemLayout.js
+++ b/dist/module/providers/shared/hooks/useItemLayout.js
@@ -35,7 +35,12 @@ function useItemLayoutPaper(position, zIndex) {
       return RELATIVE_STYLE;
     }
     if (!position.value) {
-      return HIDDEN_STYLE;
+      // Reanimated 4 can flip `usesAbsoluteLayout` before item positions have
+      // been populated. Teleporting the item offscreen (HIDDEN_STYLE) in that
+      // window makes the whole grid vanish until a scroll forces a relayout
+      // (see react-native-sortables#552). Keep the item in normal flow until
+      // its absolute position is ready instead.
+      return RELATIVE_STYLE;
     }
     return {
       left: position.value.x,
@@ -92,7 +97,12 @@ function useItemLayoutFabric(position, zIndex) {
       return RELATIVE_STYLE;
     }
     if (!position.value) {
-      return HIDDEN_STYLE;
+      // Reanimated 4 can flip `usesAbsoluteLayout` before item positions have
+      // been populated. Teleporting the item offscreen (HIDDEN_STYLE) in that
+      // window makes the whole grid vanish until a scroll forces a relayout
+      // (see react-native-sortables#552). Keep the item in normal flow until
+      // its absolute position is ready instead.
+      return RELATIVE_STYLE;
     }
     const startPosition = transformStartPosition.value;
     return {