Responder a acciones de botones en React Native SDK

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

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

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

Solo las compras, restauraciones, cierres del paywall y apertura de URLs se gestionan automáticamente. El resto de acciones de botones 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 desencadena el cierre del paywall por defecto. Sin embargo, puedes cambiar este comportamiento en tu código si lo necesitas. Por ejemplo, cerrar un paywall puede desencadenar la apertura de otro.

Para el componente React, gestiona la acción de cierre mediante las props de handler 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 handler de cierre:


const view = await createPaywallView(paywall);

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

Para la versión del SDK < 3.14, solo se admite la presentación modal:


const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    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 gestíonalo igual que los botones con la acción Open URL.

Para añadir un botón que abra un enlace desde tu paywall (p. ej., 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 handler para la acción openUrl que abra la URL recibida en un navegador.

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

Para el componente React, gestiona la apertura de URLs mediante la prop de handler 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 handler de URL:


const view = await createPaywallView(paywall);

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

Para la versión del SDK < 3.14, solo se admite la presentación modal:


const view = await createPaywallView(paywall);

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

Iniciar sesión en la app

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

En el Paywall Builder, añade un botón y asígnale la acción Login.
En el código de tu app, implementa un handler para la acción login que identifique a tu usuario.

Para el componente React, gestiona el inicio de sesión mediante la prop de handler 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 handler de inicio de sesión:


const view = await createPaywallView(paywall);

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

Para la versión del SDK < 3.14, solo se admite la presentación modal:


const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    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 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 paywall:

Para el componente React, gestiona las acciones personalizadas mediante la prop de handler 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 los handlers de acciones personalizadas:

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

Para la versión del SDK < 3.14, solo se admite la presentación modal:

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