After you designed the visual part for your paywall with Paywall Builder in the Adapty Dashboard, you can display it in your React Native app. The first step in this process is to get the paywall associated with the placement and its view configuration as described below.

Before you start displaying paywalls in your React Native app (click to expand)

1. Create your products in the Adapty Dashboard.
2. Create a paywall and incorporate the products into it in the Adapty Dashboard.
3. Create placements and incorporate your paywall into it in the Adapty Dashboard.
4. Install Adapty SDK and AdaptyUI DSK in your React Native app.

Fetch paywall designed with Paywall Builder

If you’ve designed a paywall using the Paywall Builder, you don’t need to worry about rendering it in your React Native app code to display it to the user. Such a paywall contains both what should be shown within the paywall and how it should be shown. Nevertheless, you need to get its ID via the placement, its view configuration, and then present it in your React Native app.

To ensure optimal performance, it’s crucial to retrieve the paywall and its view configuration as early as possible, allowing sufficient time for images to download before presenting them to the user.

To get a paywall, use the getPaywall method:

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

Parameter	Presence	Description
placementId	required	The identifier of the desired Placement. This is the value you specified when creating a placement in the Adapty Dashboard.
locale	optional default: en	The identifier of the paywall localization. This parameter is expected to be a language code composed of one or two subtags separated by the minus (-) character. The first subtag is for the language, the second one is for the region. Example: en means English, pt-br represents the Brazilian Portuguese language. See Localizations and locale codes for more information on locale codes and how we recommend using them.

Don’t hardcode product IDs. The only ID you should hardcode is the placement ID. Paywalls are configured remotely, so the number of products and available offers can change at any time. Your app must handle these changes dynamically—if a paywall returns two products today and three tomorrow, display all of them without code changes.

Response parameters:

Parameter	Description
Paywall	An AdaptyPaywall object with a list of product IDs, the paywall identifier, remote config, and several other properties.

Fetch the view configuration of paywall designed using Paywall Builder

After fetching the paywall, check if it includes a viewConfiguration, which indicates that it was created using Paywall Builder. This will guide you on how to display the paywall. If the viewConfiguration is present, treat it as a Paywall Builder paywall; if not, handle it as a remote config paywall.

For React Native, the view configuration is automatically handled when you present the paywall using the adaptyUI.showPaywall() method.