React Native - Animations




React Native - Animations

In this chapter, we will show you how to use LayoutAnimation in React Native.

Animations Component

We will set myStyle as a property of the state. This property is used for styling an element inside PresentationalAnimationComponent.

We will also create two functions − expandElement and collapseElement. These functions will update values from the state. The first one will use the spring preset animation while the second one will have the linear preset. We will pass these as props too. The Expand and the Collapse buttons call the expandElement() and collapseElement() functions.

In this example, we will dynamically change the width and the height of the box. Since the Home component will be the same, we will only change the Animations component.

App.js

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'

class Animations extends Component {
   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(50)
      this.animatedHeight = new Animated.Value(100)
   }
   animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 1000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 500
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.box, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center'
   },
   box: {
      backgroundColor: 'blue',
      width: 50,
      height: 100
   }
})


Frequently Asked Questions

+
Ans: React Native - Buttons view more..
+
Ans: React Native - HTTP view more..
+
Ans: React Native - Images view more..
+
Ans: React Native - Animations view more..
+
Ans: React Native - Debugging view more..
+
Ans: React Native - Router view more..
+
Ans: React Native - Running IOS view more..
+
Ans: React Native - Running Android view more..
+
Ans: React Native - View view more..
+
Ans: React Native - WebView view more..
+
Ans: React Native - Modal view more..
+
Ans: React Native - ActivityIndicator view more..
+
Ans: React Native - Picker view more..
+
Ans: React Native - Status Bar view more..
+
Ans: React Native - Switch view more..
+
Ans: React Native - Text view more..
+
Ans: React Native - Alert view more..
+
Ans: React Native - Geolocation view more..




Rating - NAN/5
480 views

Advertisements