React Native animations revisited — Part I

Simple and pretty LayoutAnimation

Almost every modern app contains dynamic UI elements. When it comes to animating React Native components, platform gives us many useful APIs. Animations are something what 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:

• Simple and pretty LayoutAnimation
• Amazing Animated API
• How to handle gestures with PanResponder

LayoutAnimation

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

Let’s start from defining our scene which will contain 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:

Thats our code:

But what happens when we sprinkle some LayoutAnimation magic:

Take a look:

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

componentWillUpdate() {         
  LayoutAnimation.configureNext(animationConfig);  
}

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

{
  duration: 700,
  create: {
    type: 'linear',
    property: 'opacity',
  },
  update: {
    type: 'spring',
    springDamping: 0.4,
    property: 'scaleXY',
  },
  delete: {
    type: 'linear',
    property: 'opacity',
  },
}

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 first one which is .spring(), besides that one we have also .linear() and .easeInEaseOut(). They are just calls over .configureNext() function which is also exposed for us, 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.

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

I owe a lot to the fantastic React & React Native community, hence I want to contribute back to it and share some of my knowledge. If you like this article please leave a like!

I provide boutique consultancy services for React and React Native. If you need any help, or just want to say hi, feel free to contact me through my website, or send me an email at hello@michalchudziak.dev.