REGISTER

React Native animations revisited — Part I

Michał Chudziak
2017-01-04

blog content

Need help with React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

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 — LayoutAnimationprovides .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 here.

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

Summary

If you’re interested in something a bit more difficult, but also more powerful — make sure you follow this series:
Part II

Part III

Author:
Michał Chudziak
Mike is responsible for maintaining the quality of our service delivery. He takes care of scaling our technical team and helping our engineers to develop their skills. He’s experienced in mobile & web application development, solution design, and technical project management. He always looks forward to exploring the new mobile and web technologies.
arrow icon
MORE posts from this author

learn more

More posts from this category

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.