React Native Transform Scale Animation Android iOS Example

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.

2. Create our main class named as App extends with Component. This is our main View class.

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.

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.

5. Create a Constant named as animatedStyle with Transform Scale value in render’s block. This is used as transform styling.

6. Create a TouchableWithoutFeedback component in render’s return block with Animated.View component. The Animated.View component is our main animated view.

7. Creating style.

8. Complete Source Code for App.js file class.

Screenshots: