---
title: "Responder a acciones de botones en React Native SDK"
description: "Gestiona las acciones de botones del paywall en React Native usando Adapty para mejorar la monetización de tu app."
---

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

1. Añade un [botón en el Paywall Builder](paywall-buttons) y asígnale una acción predefinida o crea un ID de acción personalizado.
2. 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.

:::warning
**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 \{#close-paywalls\}

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

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

:::info
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.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

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

```javascript

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}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

## Abrir URLs desde paywalls \{#open-urls-from-paywalls\}

:::tip
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**):

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

:::info
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.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

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

```javascript

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

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

## Iniciar sesión en la app \{#log-into-the-app\}

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

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

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona el inicio de sesión mediante la prop de handler de eventos:

```javascript

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}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

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

```javascript

const view = await createPaywallView(paywall);

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

</TabItem>
</Tabs>

## Gestionar acciones personalizadas \{#handle-custom-actions\}

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

1. En el Paywall Builder, añade un botón, asígnale la acción **Custom** y asígnale un ID.
2. 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:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona las acciones personalizadas mediante la prop de handler de eventos:

```javascript

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

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

</TabItem>
<TabItem value="standalone" label="Modal presentation">

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

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

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

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

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

</TabItem>
</Tabs>