react-native-purchases-ui 8.11.5 → 8.11.6

package/README.md

@@ -2,7 +2,7 @@
 
 [![License](https://img.shields.io/cocoapods/l/RevenueCat.svg?style=flat)](http://cocoapods.org/pods/RevenueCat)
 
-RevenueCat is a powerful, reliable, and free to use in-app purchase server with cross-platform support. Our open-source framework provides a backend and a wrapper around StoreKit and Google Play Billing to make implementing in-app purchases and subscriptions easy.
+RevenueCat is a powerful, reliable, and free-to-use in-app purchase server with cross-platform support. Our open-source framework provides a backend and a wrapper around StoreKit and Google Play Billing to make implementing in-app purchases and subscriptions easy.
 
 Whether you are building a new app or already have millions of customers, you can use RevenueCat to:
 
@@ -15,6 +15,133 @@ Whether you are building a new app or already have millions of customers, you ca
 
 Sign up to [get started for free](https://app.revenuecat.com/signup).
 
+---
+
 ## React Native Purchases UI
 
-React Native Purchases UI is the client for the [RevenueCat](https://www.revenuecat.com/) subscription and purchase tracking system. It is an open source framework that provides a wrapper around `StoreKit`, `Google Play Billing` and the RevenueCat backend to make implementing in-app purchases in `React Native` easy.
+React Native Purchases UI are the UI components for the [RevenueCat](https://www.revenuecat.com/) subscription and purchase tracking system. It allows you to present paywalls in your React Native application, which you can further customize through the RevenueCat dashboard. 
+
+## Installation
+
+Expo supports in-app payments and is compatible with `react-native-purchases-ui`. You can install this package in an non-development build using the Expo Go app. In this case, `react-native-purchases-ui` will run in a Preview API mode, as it requires some native modules that are not available in Expo Go. All the listed APIs below are available but have no effect. 
+
+[Creating a development build](https://docs.expo.dev/get-started/set-up-your-environment/?mode=development-build) of the app will allow you to test the real behavior of RevenueCat SDK.
+
+
+---
+
+### 📱 Paywall Presentation Options
+
+RevenueCat provides multiple ways to display paywalls in your app, depending on your use case:
+
+#### 1. `RevenueCatUI.presentPaywall()`
+
+Presents the current offering’s paywall modally.
+
+```tsx
+import RevenueCatUI, { PAYWALL_RESULT } from "react-native-purchases-ui";
+
+async function presentPaywall(): Promise<boolean> {
+  const paywallResult: PAYWALL_RESULT = await RevenueCatUI.presentPaywall();
+
+  switch (paywallResult) {
+    case PAYWALL_RESULT.NOT_PRESENTED:
+    case PAYWALL_RESULT.ERROR:
+    case PAYWALL_RESULT.CANCELLED:
+      return false;
+    case PAYWALL_RESULT.PURCHASED:
+    case PAYWALL_RESULT.RESTORED:
+      return true;
+    default:
+      return false;
+  }
+}
+```
+
+
+Optionally, pass an offering object to display a specific offering:
+
+```tsx
+await RevenueCatUI.presentPaywall({ offering });
+```
+
+#### 2. RevenueCatUI.presentPaywallIfNeeded()
+
+Displays the paywall **only if the required entitlement is not unlocked** (useful for gating access).
+
+```tsx
+const result = await RevenueCatUI.presentPaywallIfNeeded({
+  requiredEntitlementIdentifier: "pro"
+});
+```
+
+With a specific offering:
+
+```tsx
+await RevenueCatUI.presentPaywallIfNeeded({
+  offering,
+  requiredEntitlementIdentifier: "pro"
+});
+```
+
+#### 3. <RevenueCatUI.Paywall /> Component
+
+This approach provides manual control over when and how the paywall is rendered in your component tree.
+
+**Displaying the Current Offering**
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import RevenueCatUI from 'react-native-purchases-ui';
+
+return (
+  <View style={{ flex: 1 }}>
+    <RevenueCatUI.Paywall 
+      onDismiss={() => {
+        // Dismiss the paywall, i.e. remove the view, navigate to another screen, etc.
+        // Will be called when the close button is pressed (if enabled) or when a purchase succeeds.
+      }}
+    />
+  </View>
+);
+```
+
+**Displaying a Specific Offering**
+
+```tsx
+import React from 'react';
+import { View } from 'react-native';
+import RevenueCatUI from 'react-native-purchases-ui';
+
+return (
+  <View style={{ flex: 1 }}>
+    <RevenueCatUI.Paywall
+      options={{
+        offering: offering // Optional Offering object obtained through getOfferings
+      }}
+      onRestoreCompleted={({ customerInfo }: { customerInfo: CustomerInfo }) => {
+        // Optional listener. Called when a restore has been completed.
+        // This may be called even if no entitlements have been granted.
+      }}
+      onDismiss={() => {
+        // Dismiss the paywall, i.e. remove the view, navigate to another screen, etc.
+        // Will be called when the close button is pressed (if enabled) or when a purchase succeeds.
+      }}
+    />
+  </View>
+);
+```
+
+Listeners
+The `<Paywall />` component supports the following lifecycle listeners:
+- onPurchaseStarted
+- onPurchaseCompleted
+- onPurchaseError
+- onPurchaseCancelled
+- onRestoreStarted
+- onRestoreCompleted
+- onRestoreError
+- onDismiss
+
+Use these callbacks to respond to user actions such as purchase initiation, completion, dismissal, and error handling.

package/android/build.gradle

@@ -59,7 +59,7 @@ android {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
     versionCode 1
-    versionName '8.11.5'
+    versionName '8.11.6'
   }
 
   buildTypes {

package/android/src/main/java/com/revenuecat/purchases/react/ui/RNPaywallsModule.kt

@@ -89,21 +89,25 @@ internal class RNPaywallsModule(
         val fontFamily = fontFamilyName?.let {
             FontAssetManager.getPaywallFontFamily(fontFamilyName = it, activity.resources.assets)
         }
-        presentPaywallFromFragment(
-            activity = activity,
-            PresentPaywallOptions(
-                requiredEntitlementIdentifier = requiredEntitlementIdentifier,
-                shouldDisplayDismissButton = displayCloseButton,
-                paywallSource = offeringIdentifier?.let {
-                    PaywallSource.OfferingIdentifier(it)
-                } ?: PaywallSource.DefaultOffering,
-                paywallResultListener = object : PaywallResultListener {
-                    override fun onPaywallResult(paywallResult: String) {
-                        promise.resolve(paywallResult)
-                    }
-                },
-                fontFamily = fontFamily
+
+        // @ReactMethod is not guaranteed to run on the main thread
+        activity.runOnUiThread {
+            presentPaywallFromFragment(
+                activity = activity,
+                PresentPaywallOptions(
+                    requiredEntitlementIdentifier = requiredEntitlementIdentifier,
+                    shouldDisplayDismissButton = displayCloseButton,
+                    paywallSource = offeringIdentifier?.let {
+                        PaywallSource.OfferingIdentifier(it)
+                    } ?: PaywallSource.DefaultOffering,
+                    paywallResultListener = object : PaywallResultListener {
+                        override fun onPaywallResult(paywallResult: String) {
+                            promise.resolve(paywallResult)
+                        }
+                    },
+                    fontFamily = fontFamily
+                )
             )
-        )
+        }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-purchases-ui",
   "title": "React Native Purchases UI",
-  "version": "8.11.5",
+  "version": "8.11.6",
   "description": "React Native in-app purchases and subscriptions made easy. Supports iOS and Android.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -115,6 +115,6 @@
   },
   "dependencies": {
     "@revenuecat/purchases-typescript-internal": "13.37.0",
-    "react-native-purchases": "8.11.5"
+    "react-native-purchases": "8.11.6"
   }
 }