Simple React Native Animations

If you’re like me and have been hunting the web trying to find a simpler way to animate React Native views than creating a new state property every time with the Animations API then look no further. LayoutAnimation is here to save the day, with just one line of code:

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

Lets say in state one you render an image on the left of the screen and in state two you render the same image but on the right. The change in state being triggered by a button. By importing LayoutAnimation and adding this one line of code before calling setState will automatically animate the view to its new position when the component is re-rendered.

//Called when a button is pressed.
btnPress(aState) {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({aState: aState});
}

You can pick from easeInEaseOut, spring and linear as animation options but you can also build your own.

Some lightweight docs can be found here and there are a few examples floating about. Being able to animate this simply is extremely valuable when dealing with complex views or if you don’t fancy the full blown Animations API. Hopefully this article will make this awesome feature a little easier to find.