Animated.Flatlist animation still not working( v3.1.0)

[fukemy]

Description

I give video here( left is scroll view, right is Animated.FlatList)

https://github.com/software-mansion/react-native-reanimated/assets/8202437/62ae1492-e4e9-4017-8e81-625ceda1c2c9

    "react": "18.2.0",
    "react-native": "0.71.6",
    "react-native-reanimated": "3.1.0",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",

full code here:

import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  FlatList,
  Platform,
  UIManager,
} from 'react-native';
import Animated, { FadeOut, FadeOutUp, Layout,FadeInDown, enableLayoutAnimations  } from 'react-native-reanimated';

const LIST_ITEM_COLOR = '#1798DE';
enableLayoutAnimations(true);

const RItem = memo(({ item, index, onDelete, initialMode }) => (
  <Animated.View
    key={item.id}
    entering={FadeInDown}
    exiting={FadeOutUp}
    layout={Layout.springify()}
    onTouchEnd={() => onDelete(item.id)}
    style={styles.listItem}>
    <Text>{item.id}</Text>
  </Animated.View>
));

export default function App() {
  const initialMode = useRef(true);

  useEffect(() => {
    initialMode.current = false;
  }, []);

  const [items, setItems] = useState(
    new Array(2).fill(0).map((_, index) => ({ id: index }))
  );

  const onAdd = useCallback(() => {
    setItems((currentItems) => {
      const nextItemId = (currentItems[currentItems.length - 1]?.id ?? 0) + 1;
      return [...currentItems, { id: nextItemId }];
    });
  }, []);

  const onDelete = useCallback((itemId) => {
    setItems((currentItems) => {
      return currentItems.filter((item) => item.id !== itemId);
    });
  }, []);

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.floatingButton} onPress={onAdd}>
        <Text style={{ color: 'white', fontSize: 40 }}>+</Text>
      </TouchableOpacity>
      <ScrollView 
        style={{ flex: 1 }}
        contentContainerStyle={{
          flexGrow: 1,
          paddingVertical: 50,
          justifyContent: 'flex-end',
          backgroundColor: 'red'
        }}>

          {items.map((i, index) =>  <RItem
            key={index}
            item={i}
            index={index}
            onDelete={onDelete}
            initialMode={initialMode}/>
          )}
      </ScrollView>
       <Animated.FlatList
        style={{ flex: 1 }}
        contentContainerStyle={{
          flexGrow: 1,
          paddingVertical: 50,
          justifyContent: 'flex-end',
        }}
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item, index }) => (
          <RItem
            item={item}
            index={index}
            onDelete={onDelete}
            initialMode={initialMode}
          />
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    flexDirection: 'row'
  },
  listItem: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 50,
    backgroundColor: LIST_ITEM_COLOR,
    width: '90%',
    marginVertical: 10,
    borderRadius: 20,
    alignSelf: 'center',
    // Shadow on Android
    elevation: 5,
    // Shadow on iOS
    shadowColor: 'black',
    shadowOpacity: 0.15,
    shadowOffset: { width: 0, height: 10 },
    shadowRadius: 20,
  },
  floatingButton: {
    width: 80,
    aspectRatio: 1,
    backgroundColor: 'black',
    borderRadius: 40,
    position: 'absolute',
    top: 20,
    right: '5%',
    zIndex: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Steps to reproduce

1. test my app

Snack or a link to a repository

https://snack.expo.dev/@fukemy/chat-reanimated-sample?platform=android

Reanimated version

3.1.0

React Native version

0.71.6

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

ip 13

Acknowledgements

Yes

[fukemy]

solved for IOS using:

<Animated.FlatList
        itemLayoutAnimation={Layout}

still problem on Android, snack updated

[Latropos]

Hey @fukemy! What exactly is wrong? I can see that there is no layout animation in the recording, but this is because itemLayoutAnimation={Layout.springify()} should be passed to Animated.FlatList, not to item, the way it is in the linked snack

[fukemy]

nope, I avoid to use Animated Api from Flatlist and switch to LayoutAnimation react native

[t-bello7]

Try this const AnimatedFlatList = Animated.createAnimatedComponent(FlatList); <AnimatedFlatList style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1, paddingVertical: 50, justifyContent: 'flex-end', }} data={items} keyExtractor={(item) => item.id} renderItem={({ item, index }) => ( <RItem item={item} index={index} onDelete={onDelete} initialMode={initialMode} />

[fukemy]

Im tired of the animation with reanimated not working even Android + IOS

[Vepsur]

I have the same issue