Animations can give to our apps a sense of smoothness and make them look fluid, of course if we don’t abuse their use. We can use it to give feedback to our users with big animations or small things like the so called micro-interactions, in this post I only want to talk about how we can start doing it in React-Native.

If you come from the web you maybe are used to use CSS or some JS library in RN you can use a third party library as well but in this case I want to focus on the API provided by RN.

There’s two ways to make animations. You can use LayoutAnimation API or Animated API, the first one allow you to make simple animations that affects properties like opacity and transform using functions such as spring, linear and easeInEaseOut, in fact LayoutAnimation provides preset animations using these; the second one allow you to build more elaborate animations using the different configurations.

LayoutAnimation

I like to compare LayoutAnimation with transition property from CSS as a way to understand it, you only have to take care about what you want to change in your component and let that the presets functions do their magic.

These animations are really easy to implement, you just have to import it.

And use it at the moment you change the state

As a result this show and hide the text, changing the opacity. It’s the same implementation for linear and easeInEaseOut.

If you want to modify these preset animations you can use the method configureNext which receive the config object, this config object can be formed using the method create which receive the constants provided by LayoutAnimation

Something to noted here is that LayoutAnimation it’s always used when you dispatch any change in the state.

Animated

This API provides options to create a more complex animation. Includes components such as View, Text; composable functions as sequence or parallel, configurable functions as timing and a class Value -there’s more functions and classes but the scope of this post will cover only the mention above- how can we use it?

The first thing that we need to know it’s that the class Value it’s the protagonist so everything will be around it, we can instantiate this class in a const but the examples in the react web use a state so let’s do it that way, could be the state in a component class based or a hook useState.

The value -in this case opacity- would be use in a style for a component, don’t forget that the component should be a Component offered by Animated, this doesn’t mean that we can’t build our owns components, but I rather write about it in another post.

Now we need run the animation, in this case I will use timing function to do so.

The timing function would change the value of any instance of the class Animated.Value, the code above could be inside a function and be called every time that the user press a button or just be executed at the beginning with a hook.

Create animations aren’t the hardest part of build apps in RN, we only have to start playing with the API, change the styles and see the results so go ahead!