BackHandler en React Native: Manejo del Botón de Regreso en Android

---

🧱 Estructura básica de BackHandler

BackHandler se usa principalmente para interceptar el botón de regreso de dispositivos Android y realizar una acción personalizada, como mostrar un mensaje de confirmación antes de salir o navegar a otra pantalla.

Para usarlo, debes suscribirte a los eventos del sistema de navegación cuando el componente se monte y cancelar los eventos cuando se desmonte.

useEffect(() => {
  const backAction = () => {
    // Tu lógica personalizada
    return true;
  };

  const subscription = BackHandler.addEventListener('hardwareBackPress', backAction);

  return () => subscription.remove();
}, []);

🧱 ¿Cómo funciona BackHandler?

BackHandler se utiliza para:

• Escuchar eventos del botón de retroceso con hardwareBackPress.
• Interrumpir la navegación por defecto devolviendo true.
• Ejecutar lógica personalizada (confirmar salida, navegación controlada, etc.).
• Salir de la app usando BackHandler.exitApp().

🚀 Ejemplo: Confirmación antes de salir

Este ejemplo muestra cómo interceptar el botón de regreso y mostrar un Alert para confirmar si el usuario quiere salir:

import React, { useEffect } from 'react';
import { BackHandler, Alert, View, Text, StyleSheet } from 'react-native';

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert('¿Seguro que deseas salir?', 'Presiona "Atrás" nuevamente para salir', [
        { text: 'Cancelar', style: 'cancel' },
        { text: 'Salir', onPress: () => BackHandler.exitApp() },
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
    return () => backHandler.remove();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Presiona el botón de regreso para ver el mensaje de confirmación.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Propiedades y métodos importantes

• BackHandler.addEventListener(): Este método se utiliza para escuchar los eventos relacionados con el botón de regreso. El evento más común es hardwareBackPress, que se dispara cuando el usuario presiona el botón de regreso.
• BackHandler.exitApp(): Este método permite salir de la aplicación. Lo puedes usar para cerrar la aplicación cuando el usuario confirme la acción de salir.
• return true: En el evento hardwareBackPress, devolver true previene la acción predeterminada (volver a la pantalla anterior o salir de la aplicación). Si se devuelve false, el comportamiento predeterminado ocurrirá.

Desactivar el comportamiento predeterminado

Si quieres evitar completamente el comportamiento predeterminado del botón de regreso, como por ejemplo, cerrar la pantalla o salir de la aplicación, puedes hacerlo devolviendo true desde el evento hardwareBackPress:

import React, { useEffect } from 'react';
import { BackHandler, View, Text, StyleSheet } from 'react-native';

const App = () => {
  useEffect(() => {
    const backAction = () => {
      console.log('El botón de regreso ha sido presionado.');
      return true; // Evita la acción predeterminada
    };

    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);

    return () => {
      backHandler.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text>Presiona el botón de regreso y observa la consola.</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

🖱️ Otros Usos Comunes

• Navegación personalizada: Utiliza BackHandler para crear una navegación personalizada en la que, al presionar el botón de regreso, se navega a una pantalla diferente en lugar de cerrar la aplicación.
• Desactivar la navegación predeterminada: Si quieres evitar que el usuario navegue atrás en una pantalla específica, puedes interceptar el botón de regreso y prevenir la navegación.