CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
Vikram Khemlani
Vikram Khemlani

Reputation: 635

Animate deleted data on refresh in react native

I have a mobile app built using React Native. I'm using a pubsub library to make my app real time. I have a fantasy football team, which multiple people can modify. When one user deletes a player from a list, it sends a message to all other users to refresh their list. However, when their list is refreshed, the new information just overrides the old information (with setState) and the deleted player just disappears very fast. How can I instead make all the differences in the information (deleted players) fade out or some other animation. I'm not as concerned about the animation part as i am concerned about pinpointing the differences in current state and fetched data, and then fading out the data that is in current state but not in fetched data.

Upvotes: 0

Views: 645

Answers (1)

OriHero
OriHero

Reputation: 1228

I would recommend using react-native's LayoutAnimation library. It will automatically find out the items that were deleted (or added) to your state and you can pass the property you want animate. But with this easiness some drawbacks also come! You can find demo code here. If you want advanced and more configurable solution react-native-reanimated is the best! It comes with transition animations which are useful for your case! Here it's full documentation.

Upvotes: 1

Related Questions