[Bug]: Broken by react-freeze

[terreng]

Description

For context, React Navigation has an option freezeOnBlur which stops off-screen pages from rendering in the background, and it's implemented using react-freeze.

I'm using Sortable.Grid, and I noticed that after it gets frozen and unfrozen (by navigating to a different tab and back), drag and drop stops working, and the item add/remove animations also break.

Steps to reproduce

To reproduce, wrap a <Sortable.Grid> with <Freeze>, and then toggle freeze={true} then back to false again. I'm just using hot reload to do this. After it's unfrozen, observe that tapping and holding no longer does anything.

I expect it'll be easy to reproduce with any <Sortable.Grid>, regardless of the options, but in case it matters, I'm using a vertical list like this example. If you have trouble reproducing, let me know and I can take the time to create a better code snippet.

Example:

import { Freeze } from "react-freeze";

<Freeze freeze={true}>
  <Sortable.Grid
    columns={1}
    data={items}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
    overDrag="vertical"
  />
</Freeze>

Using Claude, I was able to create a patch that fixes the issue. As far as I can tell it completely fixes it. However, I don't actually understand the code it wrote or why it works, and it only modified SortableGrid.tsx so the same issue might exist for SortableFlex -- I haven't checked. I'm uploading the patch here in case it's helpful for understanding the issue, or if it might serve as a starting point for a more durable fix.

react-native-sortables+1.9.3.patch

Code snippet, Snack or GitHub repository link

see above

React Native Sortables version

1.9.3

Reanimated version

4.1.1

React Native Gesture Handler version

2.29.0

React Native version

0.81.4

Platforms

iOS

Architecture

Fabric (New Architecture)

Workflow

Expo Dev Client

Device

Real device

Acknowledgements

Yes

[MatiPl01]

Hey @terreng! This issue is related to the gesture-handler and react-freeze problem. Here is the issue I opened some time ago: software-mansion/react-native-gesture-handler#3560

As a workaround, you can use something like this:

import { useIsFocused } from '@react-navigation/native';

...

<Sortable.Grid
  key={String(useIsFocused())}
  ...
/>

It is not perfect, because it will remount the entire grid component and, if you use state in grid items, then this state will be reset to the initial one, but at least it fixes the issue with gestures being broken on navigation.

Please let me know if it helps you!

[terreng]

Glad you're aware of it, and thanks for sharing this simple workaround. I'm going to stick with the patch I shared instead because of the side effect where state would be reset.

By the way, thanks for creating and maintaining this library. It's really smooth, well-documented, and has a lot of attention to detail. I'm grateful that we get to use it.