Simple way to create animated view transitions in react native


Recently while working on my project I wanted to create a transition effect when user switched cards in my application. I went through react native animation apis first and though of using LayoutAnimation.But then I stumbled upon react-native-animatable module.

It greatly simplified the steps required to create custom view transitions in react native.

So here are the steps to integrate and use react-native-animatable in your project:

Install npm module:

Import module into your project:

Initalize view as Animatable and defining its’s props:

Here you can use your own elements with the view.

Now in order to control the transitions you can use the ref as follows:

Here fadeInRight is the animation with 300ms as duration.

I have used it on press of next and previous button as follows:

There are many different fading animations available:

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInUp
  • fadeInUpBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig

You can check out many other kinds of transitions and effects available on the official github repo here.

You can always try animation api directly but using a module might greatly simplify your code.

Thats it for today’s short tutorial.You can check out  my previous technical articles mainly focused on reactnative and react here.

Image source:Pixabay

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development