React Native Spring Animation Android iOS Example Tutorial

React Native’s own Animated library supports all type of animation and one of them is Spring Animation. Today we would learn about Spring animation. Spring animation is a type of animation transition where we can increase size of a object according to its given default height width with bumbling effect. We would perform increasing and decreasing spring effect animation on single button click event. So in this tutorial we would learn about React Native Spring Animation Android iOS Example Tutorial.

Before getting started below you can see the Live Screenshot of App:

React Native Spring Animation Android iOS Example Tutorial

Contents in this project React Native Spring Animation Android iOS Example Tutorial:

1. Open your project’s main App.js file and import Animated, StyleSheet, View and TouchableWithoutFeedback component.

2. Create our main export default class App extends component.

3. Creating constructor() in your main class, Now we would make 2 States named as animationValue and objectState.

  • animationValue : Used to set the Animated value to perform spring animation.
  • objectState : Used to perform Increasing and Decreasing Spring animation.

4. Creating a function named as animationStart(). We would use this function to execute the Spring animation. In this function first we would put a IF condition, Using this IF condition we would check whether we have to increase the object size using Spring animation or decrease the object size using Spring animation.

5. Creating render() block, We would make a Constant Style named as animatedStyle. Using this style we would transform the object using Scale value.

6. Creating return() block in render() method. Now we would make a Root View component. Inside the Root View we would make a TouchableWithoutFeedback component and wrap Animated.View component inside the TouchableWithoutFeedback component.

7. Creating Style.

Screenshots:

Leave a Reply

Your email address will not be published. Required fields are marked *