Upgraded from 3.6.2 tp 3.10.1 as part of Expo50 to Expo51 upgrade and now Android dragging is very slow.

[joshon]

Hi,

Upgraded from 3.6.2 to 3.10.1 as part of Expo50 to Expo51 upgrade and now dragging on Android is very slow.
I have an app in which you drag tiles around - and as you drag it affects the position of other tiles. I used runOnJS and got very smooth (silky smooth!) results in 3.6.2. When I used runOnUI it was clunky because as I am dragging I call JS functions - so I needed to be on the JS thread for the reactions to be real-time and smooth.

But when I upgraded to 3.10.1 it became super slow on Android and a bit buggy: rendering of animations didn't always complete until I went and moved a tile again to rerender...

I may just revert for now, but before I do - does any of this sound familiar or potentially be expected with this upgrade?

[joshon]

I reverted to Expo50 and 3.62 - it all is working beautifully again.
I am trying to understand the likely changes that affected it - but the documentation for 3x seems to be pretty much the same between versions. I have not tried to debug (too depressing, and time-consuming for now - I am about to launch the app)
But here are some things that it could be:

• I was over-fitting to some quirks in JS Thread on 3.6.2 - and those got fixed
• there were some optimization for the UI thread that hurt the JS thread animations...
• the way that shared values worked changed - maybe when used in JS thread?
• the order in which JS thread calls were made...

My basic flow:
I listen for gestures on a Tile:
<GestureDetector gesture={composed}>

I handle that with:

    const pan = useMemo(() => {
        return Gesture.Pan()
            .runOnJS(true)
            .onStart((event, success) => { ...

On onChange I see if I have rolled over another tile and call a JS swapTiles Function:

.onChange((event, success) => {
                //console.log("onChange: ", event, success);
                if(ignorePanGesture.value) {
                    return;
                }
                if(!useGridStore.getState().isDraggable || (gridStore.getState().tileBeingDragged !== -1 && gridStore.getState().tileBeingDragged !== id))  {
                    return;
                }
                if(!letter.value) {
                    return;
                }
                // console.log("onChange: ", id, event.translationX, event.translationY);
                const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
                const overCol = clamp(Math.round((startX.value + event.translationX) / cellSize), 0, gridSV.value.length - 1);
                const overRow = clamp(Math.round((startY.value + event.translationY) / cellSize), 0, gridSV.value.length - 1);
                //runOnJS(swapTiles)(id, overRow, overCol);
                swapTiles(id, overRow, overCol);
                x.value = clamp(startX.value + event.translationX, 0, gridSV.value[0].length * cellSize - cellSize);
                y.value = clamp(startY.value + event.translationY, 0, gridSV.value.length * cellSize - cellSize);
                if(gridStore.getState().tileSelectedForSwapping) {
                    gridStore.getState().deselectTileForSwapping();
                }
            })

The swapTile function updates tile positions in a Zustand state holder - and the other Tiles are subscribed to changes on their positions - and animate accordingly:

    useEffect(() => {
        const unsub2 = useGridStore.subscribe((state) => state.tiles["T" + id], (tile) => {
            if (isDragged.value === true) {
                return
            };
            //console.log("sub tile: ", tileSV.value.letter, "row: ", tileSV.value.row, "=>", tile.row, "| col: ", tileSV.value.col, "=>", tile.col);
            //
            console.log("Tile" + id + " updated, tile: ", tile);
            if(!tile) {
                console.log("no tile");
                return;
            }
            tileSV.value = tile;
            updateTileValues(tile, true);
        }, true);
        return unsub2;
    }, []);

None of this is working well in Expo51 with react-native-reanimated 3.10.1 and the compatible react-native-gesture-handler. What used to be smooth is now super slow and glitchy.

[timmytan18]

I'm having the same issue - did you ever resolve this?

[joshon]

No, I rolled back. :( I am using the JS thread to drag with, because I have to make JS calls as I drag (dragging affects other things). My guess (only a guess is that most of the focus has been on the UI thread. Hopefully, this will get fixed.

Here is my game so you can see what I mean: https://a-few-words.com It relies on smooth dragging.

Sorry that I couldn't be more help. I may have to come back to this whenever I am forced to upgrade!

[Glazzes]

@timmytan18 It's an already known bug #5816, I've drastic performance issues on Android when running runOnJS functions, it seems like it has not changed much since.