title: Understanding react-native-reanimated execution
body: <p>I'm new to <code>react-native-reanimated</code> and trying to wrap my head around how it works. The code below renders a box in the middle of the screen. On the initial render, the box translates to the right for 4 seconds, after which its position is reset to the middle of the screen. </p>
  
  <pre><code>... imports omitted for brevity
  
  export default class App extends React.Component {
    state = {
      clock: new Clock(),
      translation: new Value(0),
    };
  
    onPress = () =&gt; {
      startClock(this.state.clock);
    };
  
    getTranslation = (clock, translation) =&gt; {
      const state = {
        finished: new Value(0),
        position: translation,
        time: new Value(0),
        frameTime: new Value(0),
      };
      const config = {
        duration: 4000,
        toValue: new Value(300),
        easing: Easing.inOut(Easing.ease),
      };
      return block([
        cond(clockRunning(clock), 0, [
          set(state.finished, 0),
          set(state.position, 0),
          set(state.time, 0),
          set(state.frameTime, 0),
          startClock(clock),
        ]),
        timing(clock, state, config),
        cond(state.finished, set(state.position, 0)),
        state.position,
      ]);
    };
  
    render() {
      const translation = this.getTranslation(
        this.state.clock,
        this.state.translation
      );
      return (
        &lt;View style={styles.container}&gt;
          &lt;TouchableOpacity onPress={this.onPress}&gt;
            &lt;Animated.View
              style={{
                transform: [
                  {
                    translateX: translation,
                  },
                ],
                width: 100,
                height: 100,
                backgroundColor: "tomato",
              }}
            /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>My questions are:</p>
  
  <blockquote>
    <p>1) Why does the box only translate to the right on the initial render?
    What prevents the animation from repeating?</p>
    
    <p>2) The onPress handler doesn't restart the animation. Why?</p>
  </blockquote>