CODEWITHSUNDEEP
reactjsreact-nativereact-animated
Somename
Somename

Reputation: 3434

Unable to do the transform animation in React Native

Unable to get Animated to work. I am adding a button style and Animated.View in the container. So when I pressIn I want the Animated.View to shrink to .5 and when on pressOut want it to come back to 1. I set the this.animatedValue = new Animated.Value(1) on componentWillMount itself. My code is below:

'use strict';

import React, { Component } from 'react';
import { StyleSheet, Text, Animated, Easing, Image,
         TouchableWithoutFeedback, View} from 'react-native';

class MyAnim extends Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.handlePressIn = this.handlePressIn.bind(this);
      this.handlePressOut = this.handlePressOut.bind(this);
    }

  componentWillMount() {
    this.animatedValue = new Animated.Value(1);
  }

  handlePressIn() {
    Animated.spring(this.animatedValue,{
        to: .5
    }).start()
  }
  handlePressOut() {
    Animated.spring(this.animatedValue,{
        to: 1,
        friction: 3,
        tension: 40
    }).start()
  }

  render() {
    const animatedStyle = {
        transform: [{ scale: this.animatedValue }]
    }
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback
          onPressIn={this.handlePressIn}
          onPressOut={this.handlePressOut}
        >
          <Animated.View style={[styles.button, animatedStyle]}>
            <Text style={styles.buttonText}>Press Me</Text>
          </Animated.View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1, justifyContent:'center', alignItems:'center'
  },
  button:{
    backgroundColor:'#333', width:100, height:50, marginBottom:10,
    justifyContent:'center', alignItems:'center'
  },
  buttonText:{
    color:'#fff'
  },
});

export default MyAnim;

I'm trying a simple spring animation. The error is:

enter image description here

What am I doing wrong? I want the button to to transform to size .5 on pressIn and back to 1 on pressOut.

Upvotes: 1

Views: 956

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You need to use toValue instead of to as mentioned in the latest docs

Tracks velocity state to create fluid motions as the toValue updates, and can be chained together.

Also as mentioned in their SpringAnimation.js config

 toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,

handlePressIn() {
        Animated.spring(this.animatedValue,{
            toValue: .5
        }).start()
    }

handlePressOut() {
    Animated.spring(this.animatedValue,{
        toValue: 1,
        friction: 3,
        tension: 40
    }).start()
  }

Upvotes: 1

Related Questions