Tengo una pregunta sobre este código, quiero agregar una alerta si presiona el botón Atrás pero solo en 2 pantallas de navegación (MARKETPLACE y SHOP) La alerta es para confirmar si desea retroceder o cancelar si no ¿Cómo puedo hacer eso? Mi BackButton es la primera Stack.Screen Este es el código:
<Stack.Navigator> <Stack.Screen name='Root' component={DrawerNavigator} options={{ headerShown: false, title: '', headerBackTitle: 'BackButton }}/> <Stack.Screen options={{ title: 'MARKETPLACE' }} name='Marketplace' component={Marketplace} /> <Stack.Screen options={{ title: 'SHOP' }} name='Shop' component={Shopping} /> <Stack.Screen options={{ title: 'CHECKOUT' }} name='Checkout' component={Checkout} /> <Stack.Screen options={{ title: 'CHECK' }} name='Check' component={CheckSuccess} /> </Stack.Navigator>A partir de @react-navigation/native versión 5.7+ , puede agregar beforeRemove listener al objeto de navegación para evitar volver atrás.
EJEMPLO
function Marketplace({ navigation }) { const [text, setText] = React.useState(''); const hasUnsavedChanges = Boolean(text); React.useEffect( () => navigation.addListener('beforeRemove', (e) => { if (!hasUnsavedChanges) { // If we don't have unsaved changes, then we don't need to do anything return; } // Prevent default behavior of leaving the screen e.preventDefault(); // Prompt the user before leaving the screen Alert.alert( 'Discard changes?', 'You have unsaved changes. Are you sure to discard them and leave the screen?', [ { text: "Don't leave", style: 'cancel', onPress: () => {} }, { text: 'Discard', style: 'destructive', // If the user confirmed, then we dispatch the action we blocked earlier // This will continue the action that had triggered the removal of the screen onPress: () => navigation.dispatch(e.data.action), }, ] ); }), [navigation, hasUnsavedChanges] ); return ( <TextInput value={text} placeholder="Type something…" onChangeText={setText} /> ); }