Animations in React Native. How to achieve great performance and tips — 1x04

Tasos Maroudas
Building With React Native
5 min readMar 15, 2018

--

This story is part of a series where I am sharing my experiences on React Native: how I approached and worked with RN Components, APIs, external packages and all sorts of issues. I hope that this series of posts will prove useful to the React Native community and provide helpful insights. For app development enquiries check us out or contact me here.

Why are animations important?

Animations are important in order to create an optimal user experience, especially in the mobile world. App users have been exposed to a lot of them already, and have become familiar with their usability and beauty. And since they have hands-on experience with them, they expect them as a given in every single app they download. As per the React Native animations documentation:

Objects in motion have momentum.

Animations allow you to convey physically believable motion in your interface.

Image 1: Animations are awesome!

Animation systems in React Native

React Native provides two complementary animation systems: Animated and LayoutAnimation. These are 2 different APIs with a different usability and purpose.

--

--

Tasos Maroudas
Building With React Native

❤ React Native. Part time blogger. CTO & Founder of Coded Lines Ltd