Having Animated.View with entering breaks FlatList

[Stevemoretz]

Description

This is a follow up on : https://github.com/software-mansion/react-native-reanimated/issues/2703 and https://github.com/software-mansion/react-native-reanimated/issues/2704

I have narrowed down the issue to elimination of the Animated.FlatList and using a regular Flatlist instead.

When removing the items, the touch event of some of them gets disabled.

Expected behavior

They still should be touched.

Actual behavior & steps to reproduce

Snack or minimal code example

Checkout this simple example, by pressing each of the rectangles they get removed, but at some point it stops and you can not remove all of the items. (for me always the first item is the last that stays forever and I can't touch it anymore)

import * as SplashScreen from "expo-splash-screen";
import React, {useEffect, useState} from "react";
import {FlatList, Pressable, SafeAreaView, Text} from "react-native";
import Animated, {FadeIn} from "react-native-reanimated";

const App = () => {
    useEffect(() => {
        SplashScreen.hideAsync();
    }, []);

    const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
    return (
        <SafeAreaView style={{flex: 1, width: "100%"}}>
            <FlatList
                data={items}
                keyExtractor={(item) => {
                    return `${item}`;
                }}
                renderItem={({item}) => {
                    return (
                        <Pressable
                            onPress={() => {
                                console.log(`pressed ${item}`);
                                const newItems = [...items];
                                newItems.shift();
                                setItems(newItems);
                            }}
                        >
                            <Animated.View
                                entering={FadeIn}
                                style={{
                                    backgroundColor: "gray",
                                    width: 100,
                                    height: 50,
                                    marginVertical: 10,
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                <Text>{item}</Text>
                            </Animated.View>
                        </Pressable>
                    );
                }}
            />
        </SafeAreaView>
    );
};

export default App;

Package versions

name	version
react-native	0.64.3
react-native-reanimated	~2.3.1
NodeJS	v14.17.2
Xcode	x
Java	x
Gradle	x
expo	SDK 44

Affected platforms

• [ x] Android
• [ ] iOS
• [ ] Web

[magrinj]

Same issue for me, feel like I was crazy. I've multiple FlatList on multiple screens, when I'm using entering or exiting on an animation it break everything for just one list... Removing entering and exiting from the Animated.View fix everything.

[Zenb0t]

I have a similar project, where I have an Animated.View with an entering and exiting animation, and it freezes the app. Seems like there is a transparent view on top. Funny enough, only happens on iOS. Also, my Animated.ScrollView is INSIDE the Animated.View

Seems to me that the problem is the layout animations indeed. Removing then fix the issue.

[github-actions[bot]]

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?

[Latropos]

Hi! It looks that the bug doesn't appear in the newest version of reanimated. However if you still see this happening you can try using Animated.FlatList instead of FlatList.