Respond to button actions in React Native SDK

If you are building paywalls using the Adapty paywall builder, it’s crucial to set up buttons properly:

Add a button in the paywall builder and assign it either a pre-existing action or create a custom action ID.
Write code in your app to handle each action you’ve assigned.

This guide shows how to handle custom and pre-existing actions in your code.

Only purchases, restorations, paywall closures, and URL opening are handled automatically. All other button actions require proper response implementation in the app code.

Close paywalls

To add a button that will close your paywall:

In the paywall builder, add a button and assign it the Close action.
In your app code, implement a handler for the close action that dismisses the paywall.

In the React Native SDK, the close action triggers closing the paywall by default. However, you can override this behavior in your code if needed. For example, closing one paywall might trigger opening another.

For React component, handle the close action through individual event handler props:

import React, { useCallback } from 'react';
import { AdaptyPaywallView } from 'react-native-adapty';
import type { EventHandlers } from 'react-native-adapty';

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

For modal presentation, implement the close handler:

import {createPaywallView} from 'react-native-adapty';

const view = await createPaywallView(paywall);

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

For SDK version < 3.14, only modal presentation is supported:

import {createPaywallView} from 'react-native-adapty/dist/ui';

const view = await createPaywallView(paywall);

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

Open URLs from paywalls

If you want to add a group of links (e.g., terms of use and purchase restoration), add a Link element in the paywall builder and handle it the same way as buttons with the Open URL action.

To add a button that opens a link from your paywall (e.g., Terms of use or Privacy policy):

In the paywall builder, add a button, assign it the Open URL action, and enter the URL you want to open.
In your app code, implement a handler for the openUrl action that opens the received URL in a browser.

In the React Native SDK, the openUrl action triggers opening the URL by default. However, you can override this behavior in your code if needed.

For React component, handle URL opening through the event handler prop:

import React, { useCallback } from 'react';
import { Linking } from 'react-native';
import { AdaptyPaywallView } from 'react-native-adapty';
import type { EventHandlers } from 'react-native-adapty';

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

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

For modal presentation, implement the URL handler:

import {createPaywallView} from 'react-native-adapty';
import {Linking} from 'react-native';

const view = await createPaywallView(paywall);

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

For SDK version < 3.14, only modal presentation is supported:

import {createPaywallView} from 'react-native-adapty/dist/ui';
import {Linking} from 'react-native';

const view = await createPaywallView(paywall);

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

Log into the app

To add a button that logs users into your app:

In the paywall builder, add a button and assign it the Login action.
In your app code, implement a handler for the login action that identifies your user.

For React component, handle login through the event handler prop:

import React, { useCallback } from 'react';
import { AdaptyPaywallView } from 'react-native-adapty';
import type { EventHandlers } from 'react-native-adapty';

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

For modal presentation, implement the login handler:

import {createPaywallView} from 'react-native-adapty';

const view = await createPaywallView(paywall);

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

For SDK version < 3.14, only modal presentation is supported:

import {createPaywallView} from 'react-native-adapty';
import {createPaywallView} from 'react-native-adapty';

const view = await createPaywallView(paywall);

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

Handle custom actions

To add a button that handles any other actions:

In the paywall builder, add a button, assign it the Custom action, and assign it an ID.
In your app code, implement a handler for the action ID you’ve created.

For example, if you have another set of subscription offers or one-time purchases, you can add a button that will display another paywall:

For React component, handle custom actions through the event handler prop:

import React, { useCallback } from 'react';
import { AdaptyPaywallView } from 'react-native-adapty';
import type { EventHandlers } from 'react-native-adapty';

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

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

For modal presentation, implement custom action handlers:

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

For SDK version < 3.14, only modal presentation is supported:

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