There are 3 types of Scaling available in react native normal scale which automatically scales object in both X and Y directions. The second type is ScaleX which scales in X direction and ScaleY which scales the given object in Y direction. In this tutorial we would scaling View using normal Scale property so it will automatically scales in both direction. We are using Animation to perform this transformation. So in this tutorial we would Transform Scale Animation in Android iOS React Native Example Tutorial.
Contents in this project React Native Transform Scale Animation Android iOS Example:
1. Import Animated, StyleSheet, View and TouchableWithoutFeedback component in your app’s main App.js file.
1 2 3 |
import React, {Component} from 'react'; import { Animated, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'; |
2. Create our main class named as App extends with Component. This is our main View class.
1 2 3 4 |
export default class App extends Component { } |
3. Creating Constructor() in your App class and make a State named as animationValue using Animated.value() method and assign default value as 1. This would used to set our default Scale value as 1, So the View will be same as defined width and height.
1 2 3 4 5 6 |
constructor(){ super(); this.state={ animationValue : new Animated.Value(1), } } |
4. Create a function named as startScaleAnimation(). We would call this function on TouchableWithoutFeedback onPress event to perform animation. We are also calling the animation again so it will first get bigger then again to normal size.
1 2 3 4 5 6 7 8 9 10 11 12 |
startScaleAnimation=()=>{ Animated.timing(this.state.animationValue, { toValue : 2, timing : 1200 }).start(()=>{ Animated.timing(this.state.animationValue,{ toValue : 1, duration : 1200 }).start(); }) } |
5. Create a Constant named as animatedStyle with Transform Scale value in render’s block. This is used as transform styling.
1 2 3 4 5 6 7 8 9 |
const animatedStyle = { transform : [ { scale : this.state.animationValue } ] } |
6. Create a TouchableWithoutFeedback component in render’s return block with Animated.View component. The Animated.View component is our main animated view.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
render() { const animatedStyle = { transform : [ { scale : this.state.animationValue } ] } return ( <View style={styles.MainContainer}> <TouchableWithoutFeedback onPress={this.startScaleAnimation}> <Animated.View style={[styles.animatedBox, animatedStyle]} /> </TouchableWithoutFeedback> </View> ); } |
7. Creating style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 12 }, animatedBox: { width : 180, height: 180, backgroundColor : '#FF6F00' }, }); |
8. Complete Source Code for App.js file class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React, {Component} from 'react'; import { Animated, StyleSheet, View, TouchableWithoutFeedback } from 'react-native'; export default class App extends Component { constructor(){ super(); this.state={ animationValue : new Animated.Value(1), } } startScaleAnimation=()=>{ Animated.timing(this.state.animationValue, { toValue : 2, timing : 1200 }).start(()=>{ Animated.timing(this.state.animationValue,{ toValue : 1, duration : 1200 }).start(); }) } render() { const animatedStyle = { transform : [ { scale : this.state.animationValue } ] } return ( <View style={styles.MainContainer}> <TouchableWithoutFeedback onPress={this.startScaleAnimation}> <Animated.View style={[styles.animatedBox, animatedStyle]} /> </TouchableWithoutFeedback> </View> ); } }; const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems : 'center', padding: 12 }, animatedBox: { width : 180, height: 180, backgroundColor : '#FF6F00' }, }); |
Screenshots:
