react native layoutanimation config easeInout not working (IOS) - react-native

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.