How should I animate a React native component with the library "Animated"

0
votes

I'm trying to animate some component. I Just want to change the size of the width of a View. I'm been looking the simplest way to make simple animations.I'm using the library "Animated".I can't make this work

I'm looking for some tutorials and it doesn't work.For some reason the code doesn't reconize the initial width of a "Animated.View" it is a variable declarated on the constructor just like this "animationwidth = new Animated.Value(11);".I dont know if the problem is in the declaration of the variable, in the style of the "Animated.View"or in the "animated.timing" function

import React, { Component } from 'react';
import {Animated,Text,Alert,View, Image, Button} from 'react-native';

export default class Game extends Component {
    constructor(props) {
        super(props);
        this.state = {
            opa: 1
        };
        animationwidth = new Animated.Value(11);

    }
    componentDidmount(){
        Animated.timing(this.animationwidth, {
            toValue: 300
        }).start()
    }

    render(){
        return(
            <View style={{flex:1,alignItems:'center',backgroundColor:'green',justifyContent:'center'}}>
                <Animated.View style={{ height:250, width:this.animationwidth ,backgroundColor:'blue'}}/>
            </View>
        )
    }
}
2
react-nativeanimation

2 Answers

0
votes

You forgot to include state to animationwidth:

change your Animated.View component style like this:

<Animated.View style={{ height:250, width:this.state.animationwidth ,backgroundColor:'blue'}}/>

if does not animate. add duration property inside Animated timing function and also add state to animationwidth like this :

        Animated.timing(this.state.animationwidth, {
        toValue: 300,
        duration: 1000
    }).start()
}

base on your code the width of your View will start at 11 and end with 300

0
votes

The problem here is the render method not called again as the state is not updated again. You need to update some state variable in componentDidmount and thus the render method will call again. Add a state variable and toggle that variable in componentDidMount

    this.state = {
        isShowing : false
    };

    componentDidmount(){
      this.setState({isShowing:!this.state.isShowing})
      Animated.timing(this.animationwidth, {
        toValue: 300
      }).start()
    }