React Native Animated Swipe ou Slider

Gostaria que, quando o usuário faça o gesto de deslizar o capacete para a direita, ele se mova para outra tela e, ao deslizar o capacete para a esquerda, se mova para outra tela

código abaixo:

Obs: a View que preciso fazer isso seria a <View style={styles.box}>

import React, from 'react';
import {View, Text} from 'react-native';
import from '@react-navigation/native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import styles from './styles';

export default function OrderDetail() {
const [currentProgress] = useState(10);

const navigation = useNavigation();

function navigateToLastOrders() {
navigation.navigate('LastOrders');
}

function navigateToOrderAccept() {
navigation.navigate('OrderAccept');
}

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>
<View style={styles.box}>
<View style={styles.iconContainer}>
<MaterialCommunityIcons
style={styles.iconContainer}
name="racing-helmet"
size=
color="#fff"
/>
</View>
</View>
<View style={styles.iconsNavigation}>
<MaterialIcons
style={styles.iconSpace}
name="cancel"
size=
color="#707070"
/>
<MaterialIcons
style={styles.iconSpace}
name="check-circle"
size=
color="#8CC63F"
/>
</View>
</View>
);
}