title: React Native Animation Swipe
body: <p><strong>How can I do this animation on React native?</strong></p>
  
  <p><strong>I would like that when the user makes the gesture of sliding the helmet to the right, it moves to another screen and, when sliding the helmet to the left, it moves to another screen</strong></p>
  
  <p>is that simple?</p>
  
  <p>Do you you have another recommendation for doing this?</p>
  
  <p><a href="https://i.stack.imgur.com/A9OXt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A9OXt.png" alt="The Helmet is this in a Red circle bellow the screen"></a></p>
  
  <p><strong>Code Bellow:</strong></p>
  
  <pre><code>const pan = useRef(new Animated.ValueXY()).current;
    const panResponder = useRef(
      PanResponder.create({
        onMoveShouldSetPanResponder: () =&gt; true,
        onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
        onPanResponderRelease: () =&gt; {
          Animated.spring(pan, {toValue: {x: 0, y: 0}}).start();
        },
      }),
    ).current;
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.title}&gt;Nova corrida&lt;/Text&gt;
        &lt;Text style={styles.description}&gt;Percurso total de 2,7km&lt;/Text&gt;
        &lt;Text style={styles.description}&gt;Tempo estimado 10 minutos&lt;/Text&gt;
        &lt;View style={styles.descriptionContainer}&gt;
          &lt;Text style={styles.progressDescription}&gt;
            1,5km até coletar o pedido
          &lt;/Text&gt;
          &lt;Text style={styles.progressDescription}&gt;McDonalds, 1002&lt;/Text&gt;
          &lt;Text style={styles.progressDescription}&gt;Rua das Oliveiras, 43&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={styles.progressBarContainer}&gt;
          &lt;View
            style={{
              height: '100%',
              flex: currentProgress,
              backgroundColor: '#8CC63F',
            }}
          /&gt;
          &lt;View
            style={{
              height: '100%',
              flex: 100 - currentProgress,
              backgroundColor: 'grey',
            }}
          /&gt;
        &lt;/View&gt;
        &lt;Animated.View
          style={{
            transform: [{translateX: pan.x}, {translateY: pan.y}],
          }}
          {...panResponder.panHandlers}&gt;
          &lt;View style={styles.box}&gt;
            &lt;View style={styles.iconContainer}&gt;
              &lt;MaterialCommunityIcons
                style={styles.iconContainer}
                name="racing-helmet"
                size={36}
                color="#fff"
              /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/Animated.View&gt;
        &lt;View style={styles.iconsNavigation}&gt;
          &lt;MaterialIcons
            style={styles.iconSpace}
            name="cancel"
            size={30}
            color="#707070"
          /&gt;
          &lt;MaterialIcons
            style={styles.iconSpace}
            name="check-circle"
            size={30}
            color="#8CC63F"
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  </code></pre>