Getting Started with animations in react native

If you are even a little bit into the mobile app development world then chances are you might be well aware of this hottest app framework in the market by facebook, React Native. And this framework is well known for its native performance with awesome animations.

Now if you are willing to learn animations in react native I assume that you have at least prior some knowledge of the framework, if not then you can go here learn the basics create an app or two and then come back.

In this post I will show you how you can implement animations in react native using react-native-animatable library by oblador which simplifies the complex react native animations by providing a wide variety of predefined animations and simplified custom animations.

Preface

I will be using examples from a card that I created for a React Native UX contest and won second prize for the same among 290 individual and organizations from over 30 countries.

I would be showing you GIF’s of the animations I used in the card and the code I used to create those animations.

So let’s begin animating things…

The very first step you need to do is install react-native-animatable in your react native project using

npm install react-native-animatable --save

To add animation to any View , Image and Text just adding Animatable. before them but for other components you can create a new animated custom component like this -

MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Once you have created an animated component you can add animation to it just by using the animation prop and providing any of the predefined or custom animations.

I will start with some easy examples and then gradually move on towards a little bit complex ones

1. A simple Sliding up and down animation

The code I used to produce the above affect is as follows -

In the above piece of code we have two state variables namely show and anim .

• The show state is used to show the manage the visibility of the emojis.
• The anim state is used to decide the animation that we should perform on the press of the button, i.e., the sliding up or the sliding down animation.

Both the tasks are performed on the press of the icon, the anim state is changed immediately, while the show state is turned to true immediately but is turned false after a delay of 500 ms just to show the sliding down animation before hiding it.

2. Background color transition animation

I have increased the speed of the animation so that it looks a bit more fluent.

In the above animation as you can see the background color transition happens with some delay rather than happening immediately.

To produce this effect you just need to create a simple custom animation for this transition and provide this to your parent <Animatable.View> using the animation prop.

const backgroundAnimation = {
   from:{
      backgroundColor:'rgb(255,255,255)'
   },
   to:{
      backgroundColor:'rgb(76, 255, 191)'
   }
}

And add it to the view as follows -

<Animatable.View animation={backgrooundAnimation}>
{// Your content goes here you can add any other animation to the inside content also like I have added zoomIn in my case}
</Animatable.View>

3. Rotating animations

To produce the flipping animation as shown above you need to add a custom animation as we did in the previous section.

const flippingAnimation = {
   0:{
      rotateY: '0deg'
   },
   1:{
      rotateY: '360deg'
   }
}
const reverseFlippingAnimation = {
   0:{
      rotateY: '0deg'
   },
   1:{
      rotateY: '360deg'
   }
}

This would rotate the card by storing the animation in the state and a state to monitor which side we are currently on.

Initially we will set the animation to an empty string and current side as front side

this.state={
   front: true,
   anim: ''
}

This animation state will be applied to the animatable view

<Animatable.View animation={this.state.animation}>
   {
    this.state.front?
       //Place your front side stuff here
    :
       //Place your backside stuff here
   }
</Animatable.View>

Then we will create a flip button which will be called on a click event, lets call this function flip

flip=()=>{
   if (this.state.front){
      this.setState({
         anim:flippingAnimation
      })
      setTimeout(()=>{
         this.setState({
            front:false
         })
      },500)
   }
else{
      this.setState({
         anim:reverseFlippingAnimation
      })
      setTimeout(()=>{
         this.setState({
            front:true
         })
      },500)
   }
}

Now whenever this function is called it would flip the card,+ switching sides.

4. Expanding and collapsing animations

All the three collapsing and expanding corners in the card are TouchableHighlights, to begin, first of all you will need to create a custom component out of the TouchableHighlight using the piece of code I mentioned in the very beginning

MyTouchableHighlight = Animatable.createAnimatableComponent(TouchableHighlight);

And now you just need to toggle the animation on the click of our new MyTouchableHighlight component.

You can create a toggle function similar to what we created in the previous section.

The custom animation for collapsing and expanding the TouchableHighlight would be as follows.

const expandInfoBtn={
   from:{
     width:25,
     height:25,
     zIndex:0,
     borderTopLeftRadius:0,
     borderBottomRightRadius:0,
     borderTopRightRadius:10,
     borderBottomLeftRadius:40
},
  to:{
     width:deviceWidth-40,
     height:expandHeight,
     zIndex:5,
     borderTopLeftRadius:10,
     borderBottomRightRadius:10,
     borderTopRightRadius:10,
     borderBottomLeftRadius:10
  }
}
const shrinkInfoBtn={
   from:{
      width:400,
      height:800,
      zIndex:5,
      borderTopLeftRadius:10,
      borderBottomRightRadius:10,
      borderTopRightRadius:10,
      borderBottomLeftRadius:10
  },
  to:{
     width:45,
     height:45,
     zIndex:0,
     borderTopLeftRadius:0,
     borderBottomRightRadius:0,
     borderTopRightRadius:10,
     borderBottomLeftRadius:40
  }
}

Our new component will work something like this -

<MyTouchableHighlight animation={this.state.animation} onPress={this.toggle} style={style.topRight}>
   <View>
      <Icon name="iconName"/>
      {// Put the other stuff here which you want to show when the    TouchableHighlight is expanded}
   </View>
</MyTouchableHighlight>

The toggle function will work similar to the flip function in the previous section by switching the animation between expandInfoButton and shrinkInfoButton .

I hope by now you have understood the basics of animations in react native using react-native-animatable and how easily you can perform many kinds of complex animation using the same.

There are many more options available in this library, for more information you can see their docs.

You the card I created for the contest here on expo.

Thanks for reading ;)