Skip to content

Swiping ReanimatedSwipeable in FlatList often swipes the wrong one #3839

@AlexErrant

Description

@AlexErrant

Description

I have a list of cards, let's call them A and B. If I swipe A, then swipe A again, it works. If I swipe A, then swipe B, for some reason A gets swiped. Only when I swipe A, B, then B again, does B get swiped. Here's a video displaying the behavior (and mor)

WindowsTerminal_Eb3mTeOr7Y.mp4

In the minimal repro, it doesn't matter if I use { FlatList } from "react-native-gesture-handler" or { FlatList } from "react-native". LegendList also has this issue. The minimal repro uses the npx create-expo-app@latest template, and thus expo: 54.0.25, but it also fails in expo: 53.0.22.

Steps to reproduce

Minimal code:

import React from "react";
import { FlatList, Text, View } from "react-native";
import ReanimatedSwipeable from "react-native-gesture-handler/ReanimatedSwipeable";

export default function HomeScreen() {
  return (
    <View style={{ marginTop: 200 }}>
      <FlatList
        data={[
          {
            id: "msg1",
          },
          {
            id: "msg2",
          },
          {
            id: "msg3",
          },
        ]}
        keyExtractor={(item) => item.id}
        renderItem={() => (
          <View>
            <ReanimatedSwipeable
              containerStyle={{
                backgroundColor: "lime",
                overflow: "hidden",
              }}
              renderLeftActions={() => <Text>Why hello there!</Text>}
            >
              <Text
                style={{
                  fontSize: 30,
                  fontWeight: "bold",
                  backgroundColor: "cyan",
                  margin: 10,
                  padding: 10,
                  borderRadius: 10,
                  color: "white",
                }}
              >
                Placeholder Words
              </Text>
            </ReanimatedSwipeable>
          </View>
        )}
      />
    </View>
  );
}
  1. npx expo run:android
  2. Swipe msg1
  3. Swipe msg2
  4. Notice that msg1 gets swiped.

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://github.com/AlexErrant/swipeDebug

Gesture Handler version

2.29.1

React Native version

0.81.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

Using Expo Prebuild or an Expo development build

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

Real device

Device model

Pixel 4a, Android 13

Acknowledgements

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Platform: AndroidThis issue is specific to AndroidRepro providedA reproduction with a snack or repo is provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions