HamburgerButton animation

HamburgerDummy.js

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

const {
  width,
  height
} = Dimensions.get('window');

const SQUARE_DIMENSIONS = 80;

export default class Test extends Component {
  constructor(props){
    super(props);
    this.getStyle = this.getStyle.bind(this);
    this.moveIt = this.moveIt.bind(this);

    this.state = {
      pan: new Animated.ValueXY(),
      basementShowing: false,      
    }
  }

  getStyle() {
    return [
      styles.square,
      {transform: this.state.pan.getTranslateTransform()}
    ];
  }

  moveIt() {    
    const { basementShowing } = this.state;
    let animationVal = basementShowing ? { x: 0, y: 0 } : { x: 180, y: 140 }    
    Animated.timing(this.state.pan, {      
      toValue: animationVal,
      duration:100,
      useNativeDriver: true
    }).start();     
    this.setState({basementShowing: !basementShowing})
  }


  render() {
    return (
      <View style={styles.container}>
        <Animated.View style={this.getStyle()} >
          <TouchableOpacity style={styles.button} onPress={this.moveIt}/>          
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:'yellow'
  },
  square: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'blue'
  },
  button: {
    position: 'absolute',
    top:30,
    left:20,
    width: SQUARE_DIMENSIONS,
    height: SQUARE_DIMENSIONS,
    backgroundColor: 'white'    
  }
});