React Native Animation Swipe View

Question

How can I do this animation on React native?

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

is that simple?

Do you you have another recommendation for doing this?

**Code Bellow: **

const pan = useRef(new Animated.ValueXY()).current;
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
      onPanResponderRelease: () => {
        Animated.spring(pan, {toValue: {x: 0, y: 0}}).start();
      },
    }),
  ).current;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Nova corrida</Text>
      <Text style={styles.description}>Percurso total de 2,7km</Text>
      <Text style={styles.description}>Tempo estimado 10 minutos</Text>
      <View style={styles.descriptionContainer}>
        <Text style={styles.progressDescription}>
          1,5km até coletar o pedido
        </Text>
        <Text style={styles.progressDescription}>McDonalds, 1002</Text>
        <Text style={styles.progressDescription}>Rua das Oliveiras, 43</Text>
      </View>
      <View style={styles.progressBarContainer}>
        <View
          style={{
            height: '100%',
            flex: currentProgress,
            backgroundColor: '#8CC63F',
          }}
        />
        <View
          style={{
            height: '100%',
            flex: 100 - currentProgress,
            backgroundColor: 'grey',
          }}
        />
      </View>
      <Animated.View
        style={{
          transform: [{translateX: pan.x}, {translateY: pan.y}],
        }}
        {...panResponder.panHandlers}>
        <View style={styles.box}>
          <View style={styles.iconContainer}>
            <MaterialCommunityIcons
              style={styles.iconContainer}
              name="racing-helmet"
              size={36}
              color="#fff"
            />
          </View>
        </View>
      </Animated.View>
      <View style={styles.iconsNavigation}>
        <MaterialIcons
          style={styles.iconSpace}
          name="cancel"
          size={30}
          color="#707070"
        />
        <MaterialIcons
          style={styles.iconSpace}
          name="check-circle"
          size={30}
          color="#8CC63F"
        />
      </View>
    </View>
  );