React Native - Animations


Advertisements


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

Home Component

We will use Home screen like in other chapters. Let us now import the Animations component and render it on screen.

src/components/home/Animations.js

import React from 'react';
import Animations from './Animations.js'

const Home = () ⇒ {
   return (
      <Animations />
   )
}
export default Home

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.

src/components/home/Home

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

class Animations extends Component {
   state = {
      myStyle: {
         height: 100,
         backgroundColor: 'red'
      }
   } 
   expandElement = () ⇒ {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      this.setState({
         myStyle: {
            height: 400,
            backgroundColor: 'red'
         }
      })
   }
   collapseElement = () ⇒ {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
      
      this.setState({
         myStyle: {
            height: 100,
            backgroundColor: 'red'
         }
      })
   }
   render() {
      return (
         <View>
            <View>
               <View style = {this.state.myStyle}>
            </View>

            <TouchableOpacity>
               <Text style = {styles.button} onPress = {this.expandElement}>
                  Expand
               </Text>
            </TouchableOpacity>

            <TouchableOpacity>
               <Text style = {styles.button} onPress = {this.collapseElement}>
                  Collapse
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}
export default Animations

const styles = StyleSheet.create({
   button: {
      borderWidth: 1,
      borderColor: 'red',
      color: 'red',
      textAlign: 'center',
      marginTop: 50,
      padding: 10
   }
})
export default Home

You can test the app and see the animations we created. The initial setup will look like this −

React Native Animations Collapsed

We can press the Expand button to see an animation.

React Native Animations Expanded

Example

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.

src/components/home/Animations

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
   }
})

The initial screen will show a small blue box.

React Native Animations Collapsed

To trigger animation, we need to press it.

React Native Animations Expanded

Advertisements