Solution Animation + Data Flow

Imagine having a like animation and a counter. When the like is pressed the counter should increment.

A person using the interface doesn’t know about how data flux is designed, what is a network request. The person just expects the heart to be colored immediately.

As React Native is single-threaded, the best approach is to run animation on UI Thread(color the icon + update the counter) and only when the animation is finished run on JS Thread the rest of the work as updating state and sending a network request. In this way the counter is not waiting for request, the whole interaction is on UI.