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:
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",
CodePudding user response:
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.