Icon Transition in React Native

A transition is a change of one view state into another. The react-native-reanimated library provides a simply way to perform transitions. In combination with react-native-svg, you could create a simple icon effect, like filling a heart icon.

The source code in action can be found here.

You could achieve the same effect using basic animations, but transitions can make it more easy by triggering multiple animations at the same time or in sequence.

A click on the icon toggles the view state, as well as transition change. The transition itself consists of a combination of scaling and easing.

Originally published at https://mariusreimer.com on December 11, 2020.