ReanimatedSwipeable | slow performance scrolling

[erie-e9]

Description

FPS down when I'm using ReanimatedSwipeable from import Swipeable from 'react-native-gesture-handler/ReanimatedSwipeable' in each item Items are not been loaded until fetch from API is done, so this is not a load data issue. If I replace it for Swipeable from import Swipeable from 'react-native-gesture-handler/Swipeable' all work great

This issue is happening in Dev and Release apps and using Hermes + RN's New arch.

Note: I applied FlatList performance strategies and tested it with/without them and the issue is still happening.

Steps to reproduce

1. Run app on real device (issue is most visible on Android devices).
2. Turn on Perf Monitor.
3. Create a List with items using FlatList
4. Add Swipeable actions for each item.
5. Scroll down/up list.

Snack or a link to a repository

https://github.com

Gesture Handler version

2.21.0, 2.21.1 and 2.21.2

React Native version

0.76.5

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Release mode

Device

Real device

Device model

Huawei P30 Pro, iPhone 16 Pro Max

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[latekvo]

Hi, I tested both the legacy, and the reanimated Swipeable on the main branch, using the FlashList and useBenchmark from @shopify/flash-list.
I didn't notice any performance advantage in using the legacy Swipeable over the reanimated Swipeable, both averaged 30fps on Samsung S21 Ultra.

Test code - press to uncollapse

import React, { Text, StyleSheet, View, Alert } from 'react-native';

import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
import { FlashList, ListRenderItem, useBenchmark } from '@shopify/flash-list';
import { memo, useRef } from 'react';
import {
  GestureHandlerRootView,
  // Swipeable as LegacySwipeable,
} from 'react-native-gesture-handler';

function RightAction() {
  return <Text style={styles.rightAction}>Text</Text>;
}

type Item = {
  id: string;
  testID: string;
  title: string;
};

const generateItems = (count: number): Item[] => {
  return Array(count)
    .fill(0)
    .map((value, idx) => {
      // render speed test
      return {
        id: String(idx),
        testID: String(idx),
        title: `Number ${idx}`,
      };

      // re-renders test
      // return {
      //   id: String(idx),
      //   testID: String(value),
      //   title: `Number ${value}`,
      // };
    });
};

const data = generateItems(200);

const _RenderItemView = (item: Item) => (
  <View style={styles.swipeable}>
    <Text>{item.title}</Text>
  </View>
);

const RenderItemViewMemoed = memo(_RenderItemView);

export default function Example() {
  const renderItem: ListRenderItem<Item> = ({ item }) => {
    return (
      <ReanimatedSwipeable
        renderRightActions={RightAction}
        testID={item.testID}>
        <RenderItemViewMemoed {...item} />
      </ReanimatedSwipeable>
    );
  };

  const flashListRef = useRef<FlashList<Item> | null>(null);
  useBenchmark(flashListRef, (callback) => {
    Alert.alert('result', callback.formattedString);
  });

  return (
    <GestureHandlerRootView>
      <FlashList
        ref={flashListRef}
        data={data}
        renderItem={renderItem}
        estimatedItemSize={50}
        keyExtractor={(item) => item.id}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  leftAction: { width: 50, height: 50, backgroundColor: 'crimson' },
  rightAction: { width: 50, height: 50, backgroundColor: 'purple' },
  separator: {
    width: '100%',
    borderTopWidth: 1,
  },
  swipeable: {
    height: 50,
    backgroundColor: 'papayawhip',
    alignItems: 'center',
  },
});

Does this issue still occur for you on version 2.22.0-rc.0?
If so, could you please provide a reproduction where the difference is visible?

[davelynInes]

I also encounter the slow performance on scrolling on ReanimatedSwipeable, it looks jittery when scrolled, but only when I use the methods like onSwipeableOpen or onSwipeableClose. When I remove these, it's back to normal.

<ReanimatedSwipeable
//containerStyle={[style]}
ref={reanimatedRef}
friction={2}
leftThreshold={80}
rightThreshold={80}
renderLeftActions={LeftAction}
renderRightActions={RightAction}
onSwipeableOpen={() => {
console.log('jittery');
}}
>
{children}

Can you please try and check this?

[Baart]

I second the usage of onSwipeableOpen={() => { }} leads to huge stutter.

@davelynInes have you found any workaround for using onSwipeableOpen without having an unusable app ?

[davelynInes]

I second the usage of onSwipeableOpen={() => { }} leads to huge stutter.

@davelynInes have you found any workaround for using onSwipeableOpen without having an unusable app ?

I used the old/legacy react-native-gesture-handler/Swipeable for now. I didn't have issues with it.