[React and GSAP]

Hi there,

 

I'm a newbie to both react and GSAP. I'm trying to get this working on react-native. I can get the block to display but nothing happens (no errors either) when I hit 'Animate'.  Here is my code

 

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { TimelineLite } from 'gsap';

class TLine extends React.Component {
  animate = () => {
    var animation = new TimelineLite()
    animation
      .to(this.box, 1, { x: 200 })
      .to(this.box, 1, { y: 200 })
      .to(this.box, 1, { x: 0 })
      .to(this.box, 1, { y: 0 })
  }
  render() {
    return (
      <View style={textStyles.container}>
        <Button style={styles.button} onPress={this.animate} title = 'Animate' />
        <View style={styles.box} ref={box => this.box = box} className="box" />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    width: 200,
    height: 45
    // border: 'none',
    // outline: 'none',
  },
  container: {
    padding: 100,
  },
  box: {
    marginTop: 10,
    width: 100,
    height: 100,
    backgroundColor: '#ffc107',
    borderRadius: 4
    // boxShadow: '1px 1px 27px rgba(0, 0, 0, .3)'
  }
})

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is a test for GSAP </Text>
        <TLine />
      </View>
    );
  }
}

 

Can anyone point to why it doesn't seem to work? Or, how to debug it since I don't see any errors?

 

Thanks.