Responder a las acciones de flow - React Native

Si estás creando flows o paywalls con el Adapty Flow Builder o el Paywall Builder, es fundamental configurar los botones correctamente:

Añade un botón en el flow/paywall builder y asígnale una acción predefinida o crea un ID de acción personalizado.
Escribe el código en tu app para gestionar cada acción que hayas asignado.

Esta guía explica cómo gestionar acciones personalizadas y predefinidas en tu código.

Las compras, restauraciones, cierres de flow/paywall y la apertura de URLs se gestionan automáticamente. Puedes configurar su comportamiento predeterminado o implementar respuestas para acciones personalizadas.

El SDK expone un handler de flow onRequestPermission para solicitudes de permisos del sistema, como notificaciones push o acceso a la cámara. Los flows todavía no desencadenan estas solicitudes, por lo que no necesitas implementarlo por ahora.

Cerrar flows y paywalls

Para añadir un botón que cierre tu flow o paywall:

En el builder, añade un botón y asígnale la acción Close.
En el código de tu app, implementa un manejador para la acción close que descarte el flow o paywall.

En el SDK de React Native, la acción close activa el cierre del flow o paywall por defecto. Sin embargo, puedes sobreescribir este comportamiento en tu código si lo necesitas. Por ejemplo, cerrar un flow podría desencadenar la apertura de otro.

Para el componente React, gestiona la acción de cierre a través de props individuales de manejadores de eventos:


function MyPaywall({ flow }) {
  const onCloseButtonPress = useCallback<FlowEventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Para la presentación modal, implementa el manejador de cierre:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow flow or paywall closing
    }
});

Abrir URLs desde flows y paywalls

Si quieres añadir un grupo de enlaces (por ejemplo, términos de uso y restauración de compras), añade un elemento Link en el builder y trátalo igual que los botones con la acción Open URL.

Para añadir un botón que abra un enlace desde tu flow o paywall (por ejemplo, Terms of use o Privacy policy):

En el builder, añade un botón, asígnale la acción Open URL e introduce la URL que quieras abrir.
En el código de tu app, implementa un handler para la acción openUrl que abra la URL recibida en un navegador.

En el SDK de React Native, la acción openUrl abre la URL de forma predeterminada. Sin embargo, puedes sobrescribir este comportamiento en tu código si lo necesitas.

Para el componente React, gestiona la apertura de URLs mediante la prop del manejador de eventos:


function MyPaywall({ flow }) {
  const onUrlPress = useCallback<FlowEventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

Para la presentación modal, implementa el manejador de URL:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep flow or paywall open
    },
});

Gestionar acciones personalizadas

Para añadir un botón que gestione cualquier otra acción:

En el builder, añade un botón, asígnale la acción Custom y dale un ID.
En el código de tu app, implementa un handler para el ID de acción que hayas creado.

Por ejemplo, si tienes otro conjunto de ofertas de suscripción o compras únicas, puedes añadir un botón que muestre otro flow o paywall:

Para el componente React, gestiona las acciones personalizadas a través del prop del manejador de eventos:


function MyPaywall({ flow }) {
  const onCustomAction = useCallback<FlowEventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another flow or paywall
    }
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Para la presentación modal, implementa manejadores de acciones personalizadas:

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another flow or paywall
        }
    },
});

Si estás creando paywalls con el Paywall Builder de Adapty, es fundamental configurar correctamente los botones:

Añade un botón en el Paywall Builder y asígnale una acción ya existente o crea un ID de acción personalizado.
Escribe el código en tu app para gestionar cada acción que hayas asignado.

Esta guía muestra cómo gestionar acciones personalizadas y existentes en tu código.

Solo las compras, restauraciones, cierres de paywall y apertura de URLs se gestionan automáticamente. Todas las demás acciones de botón requieren una implementación adecuada en el código de la app.

Cerrar paywalls

Para añadir un botón que cierre tu paywall:

En el Paywall Builder, añade un botón y asígnale la acción Close.
En el código de tu app, implementa un handler para la acción close que descarte el paywall.

En el SDK de React Native, la acción close activa el cierre del paywall por defecto. Sin embargo, puedes sobrescribir este comportamiento en tu código si lo necesitas. Por ejemplo, cerrar un paywall podría disparar la apertura de otro.

Para el componente React, gestiona la acción de cierre mediante props de controladores de eventos individuales:


function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}

Para la presentación modal, implementa el manejador de cierre:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});

Abrir URLs desde paywalls

Si quieres añadir un grupo de enlaces (por ejemplo, términos de uso y restauración de compras), añade un elemento Link en el Paywall Builder y trátalo igual que los botones con la acción Open URL.

Para añadir un botón que abra un enlace desde tu paywall (por ejemplo, Terms of use o Privacy policy):

En el Paywall Builder, añade un botón, asígnale la acción Open URL e introduce la URL que quieres abrir.
En el código de tu app, implementa un manejador para la acción openUrl que abra la URL recibida en un navegador.

En el SDK de React Native, la acción openUrl activa la apertura de la URL por defecto. Sin embargo, puedes sobrescribir este comportamiento en tu código si lo necesitas.

Para el componente React, gestiona la apertura de URLs a través de la prop del manejador de eventos:


function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}

Para la presentación modal, implementa el manejador de URL:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});

Iniciar sesión en la aplicación

Para añadir un botón que permita a los usuarios iniciar sesión en tu aplicación:

En el paywall builder, añade un botón y asígnale la acción Login.
En el código de tu aplicación, implementa un manejador para la acción login que identifique a tu usuario.

Para el componente React, gestiona el inicio de sesión a través del prop del manejador de eventos:


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Para la presentación modal, implementa el manejador de inicio de sesión:


const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});

Gestionar acciones personalizadas

Para añadir un botón que gestione cualquier otra acción:

En el Paywall Builder, añade un botón, asígnale la acción Custom y asígnale un ID.
En el código de tu app, implementa un handler para el ID de acción que has creado.

Por ejemplo, si tienes otro conjunto de ofertas de suscripción o compras únicas, puedes añadir un botón que muestre otro paywall:

Para el componente React, gestiona las acciones personalizadas a través del prop del manejador de eventos:


function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}

Para la presentación modal, implementa manejadores de acciones personalizadas:

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});