title: jsReact Native: How to animate a view's position with translateX?
body: <p>I am trying to move my view off screen when the "Enter Now" button is pressed:</p>
  
  <p><a href="https://i.stack.imgur.com/RHhGF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RHhGF.png" alt="Screenshot of app with arrows"></a></p>
  
  <pre class="lang-js prettyprint-override"><code>export class Onboarding extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        offsetX: new Animated.Value(0),
      }
    }
  
    hideOnboarding() {
      console.log("hiding"); // &lt;-------- prints out when button pressed
      Animated.timing(
        this.state.offsetX,
        { toValue: new Animated.Value(-100) }
      ).start();
    }
  
    render() {
      return (
        &lt;Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}&gt;
          ...
          &lt;TouchableOpacity onPress={ () =&gt; { this.hideOnboarding() } }&gt;
            &lt;View style={styles.enterButton}&gt;
              &lt;Text style={styles.buttonText}&gt;Enter Now&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/Animated.View&gt;
      );
  </code></pre>
  
  <p>But nothing is moving when I tap my button. My console statement works though. Does anyone know what I'm doing wrong?</p>