BackHandler

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

La API BackHandler detecta pulsaciones del botón físico para navegación atrás, permite registrar listeners de eventos para la acción de retroceso del sistema y te da control sobre cómo responde tu aplicación. Es exclusiva para Android.

Las suscripciones a eventos se llaman en orden inverso (es decir, la última suscripción registrada se ejecuta primero).

• Si una suscripción devuelve true, las suscripciones registradas anteriormente no se llamarán.

• Si ninguna suscripción devuelve true o no hay suscripciones registradas, se invoca programáticamente la funcionalidad predeterminada del botón atrás para salir de la app.

Atención para usuarios de modales

Si tu app muestra un Modal abierto, BackHandler no publicará ningún evento (consulta la documentación de Modal).

Patrón de implementación

tsx

const subscription = BackHandler.addEventListener(
  'hardwareBackPress',
  function () {
    /**
     * this.onMainScreen and this.goBack are just examples,
     * you need to use your own implementation here.
     *
     * Typically you would use the navigator here to go to the last state.
     */

    if (!this.onMainScreen()) {
      this.goBack();
      /**
       * When true is returned the event will not be bubbled up
       * & no other back action will execute
       */
      return true;
    }
    /**
     * Returning false will let the event to bubble up & let other event listeners
     * or the system's default back action to be executed.
     */
    return false;
  },
);

// Unsubscribe the listener on unmount
subscription.remove();

Ejemplo

Este ejemplo implementa un escenario donde se confirma si el usuario quiere salir de la app:

BackHandler.addEventListener crea un listener de eventos y devuelve un objeto NativeEventSubscription que debe limpiarse usando el método NativeEventSubscription.remove.

Uso con React Navigation

Si usas React Navigation para navegar entre pantallas, puedes seguir su guía sobre Comportamiento personalizado del botón atrás en Android.

Hook para BackHandler

React Native Hooks ofrece un práctico hook useBackHandler que simplifica la configuración de listeners de eventos.

---

Referencia

Métodos

addEventListener()

tsx

static addEventListener(
  eventName: BackPressEventName,
  handler: () => boolean | null | undefined,
): NativeEventSubscription;

---

exitApp()

tsx

static exitApp();