React Native Animations Revisited — Part I

In short

This series of articles focuses on simplifying the process of animating React Native components, especially for developers who may find animations challenging. The series is divided into three topics, with the first part covering simple, good-looking LayoutAnimation.

Simple and pretty LayoutAnimation

Almost every modern app contains dynamic UI elements. When it comes to animating React Native components, the platform gives us many useful APIs. Animations are something that can be quite confusing for new developers, so I would like to make life easier for all of you who are struggling with those.

This is a series consists of 3 topics:

LayoutAnimation

First approach I would like to talk about is the easiest one. LayoutAnimation comes with simple and easy API, and allows us to animate transitions between layout changes.

Let’s start from defining our scene which will contain a clickable blue square in the middle. With each click square’s edge length is multiplied by two. Now when we click on this square it looks like this:

clickable square in react native

Thats our code:

But what happens when we sprinkle some LayoutAnimation magic:

Take a look:

clickable square in react native with layoutanimation

Let’s talk about what just happened — LayoutAnimation provides .configureNext() function which allows us to specify look of next transition.

This function takes one argument which is the config object. It allows us to customize duration, and behavior of create, update, and delete animations. Each of those hooks supports multiple animation types and name of animated property like opacity or scaleXY.

This might be quite complicated, and I’ve promised you that it is going to be super simple. LayoutAnimation comes with some predefined presets which can help us a bit.

We just used the first one which is .spring(), besides that one we also have .linear() and .easeInEaseOut(). They are just calls over the .configureNext() function which is also exposed for us, the only difference is that it accepts config which is predefined in previous functions. You customize things like duration, or differences between create and update animations within your config object. You can read more about configuration on HubSpot document.

As you can see LayoutAnimation is amazing when it comes to simple animations.

Latest update:
January 4, 2017

FAQ

No items found.
React Galaxy City
Get our newsletter

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.