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:
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.
|
1
2
3
|
import React, {Component} from ‘react’;
import { Animated, StyleSheet, View, TouchableWithoutFeedback } from ‘react-native’;
|
2. Create our main export default class App extends component.
|
1
2
3
4
5
|
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.
|
1
2
3
4
5
6
7
|
constructor(){
super();
this.state={
animationValue : new Animated.Value(1),
objectState : 0
}
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
animationStart=()=>{
if(this.state.objectState == 0)
{
Animated.spring(this.state.animationValue, {
toValue : 2,
friction: 2.4,
tension : 50,
useNativeDriver: true,
}).start();
this.setState({objectState : 1});
}
else
{
Animated.spring(this.state.animationValue, {
toValue : 1,
friction: 2.4,
tension : 50,
useNativeDriver: true,
}).start();
this.setState({objectState : 0});
}
}
|
5. Creating render() block, We would make a Constant Style named as animatedStyle. Using this style we would transform the object using Scale value.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
const animatedStyle = {
transform: [{ scale : this.state.animationValue }],
}
return (
);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
const animatedStyle = {
transform: [{ scale : this.state.animationValue }],
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.animationStart}>
<Animated.View style={[styles.animatedBox, animatedStyle]} >
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 12
},
animatedBox:
{
width : 100,
height: 100,
backgroundColor : ‘#33691E’
}
});
|
Screenshots:
Also Read :
Upgrade NPM Node.js on MAC OS Latest Version Using Terminal
React Native User Registration with Local PhpMyAdmin MySQL Database iOS Android Tutorial
React Native Check Value Is Number Or Not Using isNaN() Validation
React Native Add Floating Action Button in Both Android iOS App
Add Custom External Text Fonts in React Native App Android iOS Tutorial
