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:

npm install react-native-animatable --save

Import module into your project:

import * as Animatable from 'react-native-animatable';

Initalize view as Animatable and defining its’s props:

<Animatable.View ref="view" style={styles.cardContainer}>
    {this.state.cardView}
</Animatable.View>

Here you can use your own elements with the view.

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

this.refs.view.fadeInRight(300);

Here fadeInRight is the animation with 300ms as duration.

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

renderNext(currentIndex){
		this.refs.view.fadeInLeft(300);
}
render() {
return (
<Animatable.View ref="view" style={styles.cardContainer}>
	{this.state.cardView}
</Animatable.View>
<Button success iconRight style={styles.nextButton} onPress={()=> this.renderNext(this.state.firstItem)}>
     Next
     <Icon name="ios-arrow-forward"/>
</Button>
 )
}

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.

Connect Deeper

Kindly recommend the article to others by clicking 💚 if you like it and follow me back for reading more such articles in the future.

You can check out my previous technical articles mainly focused on reactnative and react here.

Image source:Pixabay