React Native Increase Width Height of View using Animation Tutorial

Animation can also be used to increase and decrease View width height dynamically. So it looks like view’s width and height both increase simultaneously with animation effect. This looks so much cool on screen and gave user eyes comfort. We can also decrease object View size using animation so it looks like the Shrinking animation by decreasing object width and height. We are performing both increasing and shrinking animation using Toggle functionality in this tutorial. So in this tutorial we would React Native Increase Width Height of View using Animation Android iOS Tutorial. The inside text would also rearrange itself on object size increase.

Content in this project React Native Increase Width Height of View using Animation iOS Android Tutorial:

1. Import Animated, StyleSheet, View, TouchableWithoutFeedback and Text component in your project’s main App.js file.

2. Call our main export default class named as App extends with Component.

3. Create constructor() in your project and make 2 State named as animationValue and viewState.

  • animationValue : Used to define animation object value in this case width and height of View as 180.
  • viewState : Used to toggle animation.

4. Create a function named as toggleAnimation(). In this function we would Toggle animation between increase ans shrinking using increase width and height.

  • toValue : Here we define 300 width and height.
  • timing : Animation timing in Milliseconds.

5. Create a local constant named as animatedStyle with animationValue width and height in render’s block.

6. Crate Animated.view inside TouchableWithoutFeedback component in render’s return block. We are calling toggleAnimation function on TouchableWithoutFeedback button.

7. Creating style.

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

Screenshots:

React Native Increase Width Height of View using Animation Tutorial

3 Comments

  1. Happy diwali sir

  2. hii sir i want to share my code project structure with redux

Leave a Reply

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