react native layoutanimation config easeInout not working (IOS)

Question

i have a room list, when any room have new message, I sorted this room to top then re-render the flatList with LayoutAnimation(testing from IOS simulator):

const CONFIG = {
  duration: 300,
  create: {
    type: LayoutAnimation.Types.linear,
    property: LayoutAnimation.Properties.opacity
  },
  update: {
    type: LayoutAnimation.Types.easeInEaseOut
  },
  delete: {
    type: LayoutAnimation.Types.easeInEaseOut,
    property: LayoutAnimation.Properties.opacity
  }
}

export function animate () {
  LayoutAnimation.configureNext(CONFIG)
}

but when data changed, i didnt see any animation without fade, as video below:

video

Updated video with transition:

this is updated answer with transition

other information:

"react": "17.0.2",
"react-native": "^0.68.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-reanimated": "^2.9.1",

Answer 1

To Archive that you can use Animated in React Native, you can check this article that explains how to do it step by step from here

And you can achieve that with FlatList by using Transitioning View from react-native-reanimated like this example:

import React, { useState, useEffect, useRef } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  FlatList,
} from 'react-native';
import { datas, sortRoom, currentUser } from './components/datas';
import { RoomItem } from './RoomItem';
import { Transition, Transitioning } from 'react-native-reanimated';

    const transition = (
      <Transition.Together>
        <Transition.Change durationMs={500} />
      </Transition.Together>
    );

  const styles = StyleSheet.create({
      item: {
        width: '100%',
        height: 100,
        backgroundColor: 'red',
        marginVertical: 10,
        justifyContent: 'center',
        alignItems: 'center',
      },
      itemText: {
        fontSize: 21,
        color: '#fff',
      },
    });

export default function App() {
  const [roomList, setRoomList] = useState(datas);
  const parentRef = useRef();

  return (
<React.Fragment>
      <TouchableOpacity
        onPress={() => {
          //get random room and append to top by assign SendDate to now
          parentRef.current.animateNextTransition()
          const newRooms = [...roomList];
          const randomIndex = Math.floor(Math.random() * roomList.length);
          const matchedNewRoom = [...roomList][randomIndex];
          matchedNewRoom.LastMsg.SendDate = new Date().getTime();
          const sortedRoom = sortRoom(newRooms);
          setRoomList(sortedRoom);
        }}
        style={{
          marginTop: 20,
          justifyContent: 'center',
          alignItems: 'center',
          padding: 5,
        }}>
        <Text style={{ color: 'blue' }}> Re-Order </Text>
      </TouchableOpacity>
     <Transitioning.View ref={parentRef} transition={transition}>
      <FlatList
        style={{
          width: '100%',
        }}
        data={roomList}
        keyExtractor={(item) => item.RoomName.toString()}
        renderItem={({item}) =>  <RoomItem room={item} currentUser={currentUser}/>}
        contentContainerStyle={{
          flexGrow: 1,
        }}
        initialNumToRender={20}
        onEndReachedThreshold={0.1}
      />
    </Transitioning.View>
    </React.Fragment>
  );
}

You can check the demo here.