React Native Animation Swipe - react-native

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>
);