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.

The TikTok app has a pretty interesting loading animation. It has two horizontally aligned circles that seem to rotate its positions, seemingly in a circle. I wanted to create a similar behavior in React Native. The source code can be found here.

Initially, the spinner consists of two colored…

Marius Reimer

React Native Mobile Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store