react-native-purchases-ui 7.15.0-rc.1 → 7.15.0

package/RNPaywalls.podspec

@@ -17,6 +17,6 @@ Pod::Spec.new do |spec|
   spec.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
 
   spec.dependency   "React-Core"
-  spec.dependency   "PurchasesHybridCommon", '8.10.0-beta.8'
+  spec.dependency   "PurchasesHybridCommon", '8.10.1'
   spec.swift_version    = '5.7'
 end

package/android/build.gradle

@@ -59,7 +59,7 @@ android {
     minSdkVersion getExtOrIntegerDefault("minSdkVersion")
     targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
     versionCode 1
-    versionName '7.15.0-rc.1'
+    versionName '7.15.0'
   }
 
   buildTypes {
@@ -91,8 +91,7 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.revenuecat.purchases:purchases-hybrid-common-ui:8.10.0-beta.8'
+  implementation 'com.revenuecat.purchases:purchases-hybrid-common-ui:8.10.1'
   implementation 'androidx.compose.ui:ui-android:1.5.4'
   implementation "androidx.appcompat:appcompat:1.6.1"
 }
-

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

@@ -0,0 +1,64 @@
+package com.revenuecat.purchases.react.ui
+
+import android.annotation.SuppressLint
+import androidx.core.view.children
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.revenuecat.purchases.ui.revenuecatui.ExperimentalPreviewRevenueCatUIPurchasesAPI
+import com.revenuecat.purchases.ui.revenuecatui.views.PaywallFooterView
+
+@OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
+internal class PaywallFooterViewManager : SimpleViewManager<PaywallFooterView>() {
+    override fun getName(): String {
+        return "RCPaywallFooterView"
+    }
+
+    @SuppressLint("UnsafeOptInUsageError")
+    override fun createViewInstance(themedReactContext: ThemedReactContext): PaywallFooterView {
+        val paywallFooterView: PaywallFooterView = object : PaywallFooterView(themedReactContext) {
+
+            // This is required so the change from Loading to Loaded resizes the view
+            // https://github.com/facebook/react-native/issues/17968#issuecomment-1672111483
+            override fun requestLayout() {
+                super.requestLayout()
+                post(measureAndLayout)
+            }
+
+            private val measureAndLayout = Runnable {
+                measure(
+                    MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+                )
+                layout(left, top, right, bottom)
+            }
+
+            // This is needed so it measures correctly the size of the children and react native can
+            // size the Javascript view correctly. Not doing this will render the view with height 0
+            // and will require the devs to set a fixed height to the view, which is not ideal
+            // https://medium.com/traveloka-engineering/react-native-at-traveloka-native-ui-components-c6b66f789f35
+            public override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+                super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+                var maxWidth = 0
+                var maxHeight = 0
+                children.forEach {
+                    it.measure(widthMeasureSpec, MeasureSpec.UNSPECIFIED)
+                    maxWidth = maxWidth.coerceAtLeast(it.measuredWidth)
+                    maxHeight = maxHeight.coerceAtLeast(it.measuredHeight)
+                }
+                val finalWidth = maxWidth.coerceAtLeast(suggestedMinimumWidth)
+                val finalHeight = maxHeight.coerceAtLeast(suggestedMinimumHeight)
+                setMeasuredDimension(finalWidth, finalHeight)
+                (context as? ThemedReactContext)?.let { themedReactContext ->
+                    themedReactContext.runOnNativeModulesQueueThread {
+                        themedReactContext.getNativeModule(UIManagerModule::class.java)
+                            ?.updateNodeSize(id, finalWidth, finalHeight)
+                    }
+                }
+            }
+        }
+
+        return paywallFooterView
+    }
+
+}

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

@@ -0,0 +1,25 @@
+package com.revenuecat.purchases.react.ui
+
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.revenuecat.purchases.ui.revenuecatui.ExperimentalPreviewRevenueCatUIPurchasesAPI
+import com.revenuecat.purchases.ui.revenuecatui.views.PaywallView
+
+@OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
+internal class PaywallViewManager : SimpleViewManager<PaywallView>() {
+    companion object {
+        const val REACT_CLASS = "Paywall"
+    }
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(themedReactContext: ThemedReactContext): PaywallView {
+        return PaywallView(themedReactContext)
+    }
+
+    override fun createShadowNodeInstance(): PaywallViewShadowNode {
+        return PaywallViewShadowNode()
+    }
+}

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

@@ -0,0 +1,29 @@
+package com.revenuecat.purchases.react.ui
+
+import android.view.View
+import com.facebook.react.uimanager.LayoutShadowNode
+import com.facebook.yoga.YogaMeasureFunction
+import com.facebook.yoga.YogaMeasureMode
+import com.facebook.yoga.YogaMeasureOutput
+import com.facebook.yoga.YogaNode
+
+internal class PaywallViewShadowNode: LayoutShadowNode(), YogaMeasureFunction {
+    init {
+        setMeasureFunction(this)
+    }
+
+    override fun measure(
+        yogaNode: YogaNode,
+        width: Float,
+        yogaMeasureMode: YogaMeasureMode,
+        height: Float,
+        yogaMeasureMode1: YogaMeasureMode
+    ): Long {
+        // This is needed so the footer doesn't require a fixed height
+        // https://nicholasmarais1158.github.io/2017/07/React-Native-Custom-Measuring
+        val measuredWidth = View.MeasureSpec.getSize(width.toInt()).toFloat()
+        val measuredHeight = View.MeasureSpec.getSize(height.toInt()).toFloat()
+
+        return YogaMeasureOutput.make(measuredWidth, measuredHeight)
+    }
+}

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

@@ -1,9 +1,12 @@
 package com.revenuecat.purchases.react.ui
 
+import android.util.Log
 import androidx.fragment.app.FragmentActivity
+import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
+import com.revenuecat.purchases.hybridcommon.ui.PaywallResultListener
 import com.revenuecat.purchases.hybridcommon.ui.presentPaywallFromFragment
 
 internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
@@ -16,7 +19,10 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
         get() {
             return when (val currentActivity = currentActivity) {
                 is FragmentActivity -> currentActivity
-                else -> null
+                else -> {
+                    Log.e(NAME, "RevenueCat paywalls require application to use a FragmentActivity")
+                    null
+                }
             }
         }
 
@@ -25,20 +31,26 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
     }
 
     @ReactMethod
-    fun presentPaywall() {
-        presentPaywall(null)
+    fun presentPaywall(promise: Promise) {
+        presentPaywall(null, promise)
     }
 
     @ReactMethod
-    fun presentPaywallIfNeeded(requiredEntitlementIdentifier: String?) {
-        presentPaywall(requiredEntitlementIdentifier)
+    fun presentPaywallIfNeeded(requiredEntitlementIdentifier: String?, promise: Promise) {
+        presentPaywall(requiredEntitlementIdentifier, promise)
     }
 
-    private fun presentPaywall(requiredEntitlementIdentifier: String?) {
-        val fragment = currentActivityFragment
-            ?: // TODO: log
-            return
+    private fun presentPaywall(requiredEntitlementIdentifier: String?, promise: Promise) {
+        val fragment = currentActivityFragment ?: return
 
-        presentPaywallFromFragment(fragment, requiredEntitlementIdentifier)
+        presentPaywallFromFragment(
+            fragment,
+            requiredEntitlementIdentifier,
+            paywallResultListener = object : PaywallResultListener {
+                override fun onPaywallResult(paywallResult: String) {
+                    promise.resolve(paywallResult)
+                }
+            }
+        )
     }
 }

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

@@ -12,6 +12,6 @@ class RNPaywallsPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(RNPaywallManager())
+        return listOf(PaywallViewManager(), PaywallFooterViewManager())
     }
 }

package/ios/{RNPaywallManager.h → PaywallViewManager.h}

@@ -10,7 +10,7 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface RNPaywallManager : RCTViewManager
+@interface PaywallViewManager : RCTViewManager
 
 @end
 

package/ios/{RNPaywallManager.m → PaywallViewManager.m}

@@ -6,12 +6,12 @@
 //  Copyright © 2023 Facebook. All rights reserved.
 //
 
-#import "RNPaywallManager.h"
+#import "PaywallViewManager.h"
 @import PurchasesHybridCommon;
 
-@implementation RNPaywallManager
+@implementation PaywallViewManager
 
-RCT_EXPORT_MODULE(RNPaywall)
+RCT_EXPORT_MODULE(Paywall)
 
 - (UIView *)view
 {

package/ios/RCPaywallFooterViewManager.h

@@ -0,0 +1,17 @@
+//
+//  RCPaywallFooterViewManager.h
+//  Pods
+//
+//  Created by Cesar de la Vega on 29/12/23.
+//  Copyright © 2023 Facebook. All rights reserved.
+//
+
+#import <React/RCTViewManager.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCPaywallFooterViewManager : RCTViewManager
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/RCPaywallFooterViewManager.m

@@ -0,0 +1,147 @@
+//
+//  RCPaywallFooterViewManager.m
+//  RNPaywalls
+//
+//  Created by Cesar de la Vega on 29/12/23.
+//
+
+#import "RNPaywalls.h"
+#import "RCPaywallFooterViewManager.h"
+
+@import RevenueCatUI;
+@import PurchasesHybridCommon;
+
+#import "UIView+Extensions.h"
+
+#import <React/RCTShadowView.h>
+#import <React/RCTUIManager.h>
+#import <React/RCTBridge.h>
+#import <React/RCTRootViewDelegate.h>
+#import <React/RCTEventEmitter.h>
+
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface FooterViewWrapper : UIView
+
+- (instancetype)initWithFooterViewController:(UIViewController *)footerViewController 
+                                      bridge:(RCTBridge *)bridge;
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+@interface FooterViewWrapper () <RCPaywallViewControllerDelegate>
+
+@property (strong, nonatomic) UIViewController *footerViewController;
+@property (strong, nonatomic) RCTBridge *bridge;
+
+@property BOOL addedToHierarchy;
+
+@end
+
+@implementation FooterViewWrapper
+
+- (instancetype)initWithFooterViewController:(UIViewController *)footerViewController bridge:(RCTBridge *)bridge {
+    if ((self = [super initWithFrame:footerViewController.view.bounds])) {
+        _bridge = bridge;
+        _footerViewController = footerViewController;
+    }
+
+    return self;
+}
+
+- (void)safeAreaInsetsDidChange {
+    [super safeAreaInsetsDidChange];
+
+    // Get the safe area insets, for example
+    UIEdgeInsets safeAreaInsets = self.safeAreaInsets;
+
+//    TODO: figure out a better way of sending event, since this is deprecated
+//    It's probably better to create a singleton from the module that this view manager can call and use to send events
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-declarations"
+    [self.bridge.eventDispatcher sendAppEventWithName:safeAreaInsetsDidChangeEvent
+                                                 body:@{@"top": @(safeAreaInsets.top),
+                                                        @"left": @(safeAreaInsets.left),
+                                                        @"bottom": @(safeAreaInsets.bottom),
+                                                        @"right": @(safeAreaInsets.right)}];
+#pragma clang diagnostic pop
+}
+
+- (void)paywallViewController:(RCPaywallViewController *)controller didChangeSizeTo:(CGSize)size API_AVAILABLE(ios(15.0)){
+    [_bridge.uiManager setSize:size forView:self];
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+
+    // Need to wait for this view to be in the hierarchy to look for the parent UIVC.
+    // This is required to add a SwiftUI `UIHostingController` to the hierarchy in a way that allows
+    // UIKit to read properties from the environment, like traits and safe area.
+    if (!self.addedToHierarchy) {
+        UIViewController *parentController = self.parentViewController;
+        if (parentController) {
+            self.footerViewController.view.translatesAutoresizingMaskIntoConstraints = NO;
+            [parentController addChildViewController:self.footerViewController];
+            [self addSubview:self.footerViewController.view];
+            [self.footerViewController didMoveToParentViewController:parentController];
+
+            [NSLayoutConstraint activateConstraints:@[
+                [self.footerViewController.view.topAnchor constraintEqualToAnchor:self.topAnchor],
+                [self.footerViewController.view.bottomAnchor constraintEqualToAnchor:self.bottomAnchor],
+                [self.footerViewController.view.leftAnchor constraintEqualToAnchor:self.leftAnchor],
+                [self.footerViewController.view.rightAnchor constraintEqualToAnchor:self.rightAnchor]
+            ]];
+
+            self.addedToHierarchy = YES;
+        }
+    }
+}
+
+@end
+
+@interface RCPaywallFooterViewManager ()
+
+@property (nonatomic, strong) id proxyIfAvailable;
+
+@end
+
+@implementation RCPaywallFooterViewManager
+
+RCT_EXPORT_MODULE(RCPaywallFooterView)
+
+- (instancetype)init {
+    if ((self = [super init])) {
+        if (@available(iOS 15.0, *)) {
+            _proxyIfAvailable = [[PaywallProxy alloc] init];
+        }
+    }
+
+    return self;
+}
+
+- (PaywallProxy *)proxy API_AVAILABLE(ios(15.0)){
+    return (PaywallProxy *)self.proxyIfAvailable;
+}
+
+- (UIView *)view
+{
+    if (@available(iOS 15.0, *)) {
+        UIViewController *footerViewController = [self.proxy createFooterPaywallView];
+        FooterViewWrapper *wrapper = [[FooterViewWrapper alloc] initWithFooterViewController:footerViewController
+                                                                                      bridge:self.bridge];
+        self.proxy.delegate = wrapper;
+
+        return wrapper;
+    } else {
+        NSLog(@"Error: attempted to present paywalls on unsupported iOS version.");
+        return nil;
+    }
+}
+
++ (BOOL)requiresMainQueueSetup {
+    return YES;
+}
+
+@end

package/ios/RNPaywalls.h

@@ -8,6 +8,8 @@
 @import PurchasesHybridCommon;
 @import RevenueCat;
 
+static NSString *const safeAreaInsetsDidChangeEvent = @"safeAreaInsetsDidChange";
+
 @interface RNPaywalls : RCTEventEmitter <RCTBridgeModule>
 
 @end

package/ios/RNPaywalls.m

@@ -45,7 +45,7 @@ RCT_EXPORT_MODULE();
 // MARK: -
 
 - (NSArray<NSString *> *)supportedEvents {
-    return @[];
+    return @[safeAreaInsetsDidChangeEvent];
 }
 
 - (dispatch_queue_t)methodQueue {
@@ -58,24 +58,40 @@ RCT_EXPORT_MODULE();
 
 // MARK: -
 
-RCT_EXPORT_METHOD(presentPaywall) {
+RCT_REMAP_METHOD(presentPaywall,
+                 presentPaywallWithResolve:(RCTPromiseResolveBlock)resolve
+                 reject:(RCTPromiseRejectBlock)reject) {
     if (@available(iOS 15.0, *)) {
-        [self.paywalls presentPaywall];
+        [self.paywalls presentPaywallWithPaywallResultHandler:^(NSString *result) {
+            resolve(result);
+        }];
     } else {
-        [self logPaywallsUnsupportedError];
+        [self rejectPaywallsUnsupportedError:reject];
     }
 }
 
-RCT_EXPORT_METHOD(presentPaywallIfNeeded:(NSString *)requiredEntitlementIdentifier) {
+RCT_REMAP_METHOD(presentPaywallIfNeeded,
+                 presentPaywallIfNeeded:(NSString *)requiredEntitlementIdentifier
+                 withResolve:(RCTPromiseResolveBlock)resolve
+                 reject:(RCTPromiseRejectBlock)reject) {
     if (@available(iOS 15.0, *)) {
-        [self.paywalls presentPaywallIfNeededWithRequiredEntitlementIdentifier:requiredEntitlementIdentifier];
+        [self.paywalls presentPaywallIfNeededWithRequiredEntitlementIdentifier:requiredEntitlementIdentifier
+                                                          paywallResultHandler:^(NSString *result) {
+            resolve(result);
+        }];
     } else {
-        [self logPaywallsUnsupportedError];
+        [self rejectPaywallsUnsupportedError:reject];
     }
 }
 
-- (void)logPaywallsUnsupportedError {
+- (void)rejectPaywallsUnsupportedError:(RCTPromiseRejectBlock)reject {
     NSLog(@"Error: attempted to present paywalls on unsupported iOS version.");
+    reject(@"PaywallsUnsupportedCode", @"Paywalls are not supported prior to iOS 15.", nil);
+}
+
++ (BOOL)requiresMainQueueSetup
+{
+    return YES;
 }
 
 @end

package/ios/UIView+Extensions.h

@@ -0,0 +1,15 @@
+//
+//  UIView+Extensions.h
+//  Pods
+//
+//  Created by NachoSoto on 29/12/23.
+//  Copyright © 2023 Facebook. All rights reserved.
+//
+
+@import UIKit;
+
+@interface UIView (ParentViewController)
+
+- (UIViewController *)parentViewController;
+
+@end

package/ios/UIView+Extensions.m

@@ -0,0 +1,23 @@
+//
+//  UIView+Extensions.m
+//  RNPaywalls
+//
+//  Created by Nacho Soto on 29/12/23.
+//
+
+#import "UIView+Extensions.h"
+
+@implementation UIView (ParentViewController)
+
+- (UIViewController *)parentViewController {
+    UIResponder *responder = self;
+    while (responder) {
+        responder = responder.nextResponder;
+        if ([responder isKindOfClass:[UIViewController class]]) {
+            return (UIViewController *)responder;
+        }
+    }
+    return nil;
+}
+
+@end

package/lib/commonjs/index.js

@@ -3,16 +3,86 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.presentPaywall = presentPaywall;
-exports.presentPaywallIfNeeded = presentPaywallIfNeeded;
+Object.defineProperty(exports, "PAYWALL_RESULT", {
+  enumerable: true,
+  get: function () {
+    return _purchasesTypescriptInternal.PAYWALL_RESULT;
+  }
+});
+exports.default = void 0;
 var _reactNative = require("react-native");
+var _purchasesTypescriptInternal = require("@revenuecat/purchases-typescript-internal");
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const LINKING_ERROR = `The package 'react-native-purchases-view' doesn't seem to be linked. Make sure: \n\n` + _reactNative.Platform.select({
+  ios: "- You have run 'pod install'\n",
+  default: ''
+}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
 const RNPaywalls = _reactNative.NativeModules.RNPaywalls;
-function presentPaywall() {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywall();
-}
-function presentPaywallIfNeeded(requiredEntitlementIdentifier) {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+const eventEmitter = new _reactNative.NativeEventEmitter(RNPaywalls);
+const InternalPaywall = _reactNative.UIManager.getViewManagerConfig('Paywall') != null ? (0, _reactNative.requireNativeComponent)('Paywall') : () => {
+  throw new Error(LINKING_ERROR);
+};
+const InternalPaywallFooterView = _reactNative.UIManager.getViewManagerConfig('Paywall') != null ? (0, _reactNative.requireNativeComponent)('RCPaywallFooterView') : () => {
+  throw new Error(LINKING_ERROR);
+};
+class RevenueCatUI {
+  /**
+   * The result of presenting a paywall. This will be the last situation the user experienced before the paywall closed.
+   * @readonly
+   * @enum {string}
+   */
+  static PAYWALL_RESULT = _purchasesTypescriptInternal.PAYWALL_RESULT;
+  static presentPaywall({} = {}) {
+    return RNPaywalls.presentPaywall();
+  }
+  static presentPaywallIfNeeded({
+    requiredEntitlementIdentifier
+  }) {
+    return RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+  }
+  static Paywall = props => /*#__PURE__*/_react.default.createElement(InternalPaywall, _extends({}, props, {
+    style: [{
+      flex: 1
+    }, props.style]
+  }));
+  static PaywallFooterContainerView = ({
+    style,
+    children
+  }) => {
+    // We use 20 as the default paddingBottom because that's the corner radius in the Android native SDK.
+    // We also listen to safeAreaInsetsDidChange which is only sent from iOS and which is triggered when the
+    // safe area insets change. Not adding this extra padding on iOS will cause the content of the scrollview
+    // to be hidden behind the rounded corners of the paywall.
+    const [paddingBottom, setPaddingBottom] = (0, _react.useState)(20);
+    (0, _react.useEffect)(() => {
+      const handleSafeAreaInsetsChange = ({
+        bottom
+      }) => {
+        setPaddingBottom(20 + bottom);
+      };
+      const subscription = eventEmitter.addListener('safeAreaInsetsDidChange', handleSafeAreaInsetsChange);
+      return () => {
+        subscription.remove();
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [{
+        flex: 1
+      }, style]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+      contentContainerStyle: {
+        flexGrow: 1,
+        paddingBottom
+      }
+    }, children), /*#__PURE__*/_react.default.createElement(InternalPaywallFooterView, {
+      style: {
+        marginTop: -20
+      }
+    }));
+  };
 }
+exports.default = RevenueCatUI;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","RNPaywalls","NativeModules","presentPaywall","presentPaywallIfNeeded","requiredEntitlementIdentifier"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,MAAMC,UAAU,GAAGC,0BAAa,CAACD,UAAU;AAEpC,SAASE,cAAcA,CAAA,EAAG;EAC/B;EACAF,UAAU,CAACE,cAAc,CAAC,CAAC;AAC7B;AAEO,SAASC,sBAAsBA,CAACC,6BAAqC,EAAE;EAC5E;EACAJ,UAAU,CAACG,sBAAsB,CAACC,6BAA6B,CAAC;AAClE"}
+{"version":3,"names":["_reactNative","require","_purchasesTypescriptInternal","_react","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","LINKING_ERROR","Platform","select","ios","RNPaywalls","NativeModules","eventEmitter","NativeEventEmitter","InternalPaywall","UIManager","getViewManagerConfig","requireNativeComponent","Error","InternalPaywallFooterView","RevenueCatUI","PAYWALL_RESULT","presentPaywall","presentPaywallIfNeeded","requiredEntitlementIdentifier","Paywall","props","createElement","style","flex","PaywallFooterContainerView","children","paddingBottom","setPaddingBottom","useState","useEffect","handleSafeAreaInsetsChange","bottom","subscription","addListener","remove","View","ScrollView","contentContainerStyle","flexGrow","marginTop","exports"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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"}

package/lib/module/index.js

@@ -1,11 +1,74 @@
-import { NativeModules } from "react-native";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { NativeEventEmitter, NativeModules, Platform, requireNativeComponent, ScrollView, UIManager, View } from "react-native";
+import { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+import React, { useEffect, useState } from "react";
+export { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+const LINKING_ERROR = `The package 'react-native-purchases-view' doesn't seem to be linked. Make sure: \n\n` + Platform.select({
+  ios: "- You have run 'pod install'\n",
+  default: ''
+}) + '- You rebuilt the app after installing the package\n' + '- You are not using Expo Go\n';
 const RNPaywalls = NativeModules.RNPaywalls;
-export function presentPaywall() {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywall();
-}
-export function presentPaywallIfNeeded(requiredEntitlementIdentifier) {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+const eventEmitter = new NativeEventEmitter(RNPaywalls);
+const InternalPaywall = UIManager.getViewManagerConfig('Paywall') != null ? requireNativeComponent('Paywall') : () => {
+  throw new Error(LINKING_ERROR);
+};
+const InternalPaywallFooterView = UIManager.getViewManagerConfig('Paywall') != null ? requireNativeComponent('RCPaywallFooterView') : () => {
+  throw new Error(LINKING_ERROR);
+};
+export default class RevenueCatUI {
+  /**
+   * The result of presenting a paywall. This will be the last situation the user experienced before the paywall closed.
+   * @readonly
+   * @enum {string}
+   */
+  static PAYWALL_RESULT = PAYWALL_RESULT;
+  static presentPaywall({} = {}) {
+    return RNPaywalls.presentPaywall();
+  }
+  static presentPaywallIfNeeded({
+    requiredEntitlementIdentifier
+  }) {
+    return RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+  }
+  static Paywall = props => /*#__PURE__*/React.createElement(InternalPaywall, _extends({}, props, {
+    style: [{
+      flex: 1
+    }, props.style]
+  }));
+  static PaywallFooterContainerView = ({
+    style,
+    children
+  }) => {
+    // We use 20 as the default paddingBottom because that's the corner radius in the Android native SDK.
+    // We also listen to safeAreaInsetsDidChange which is only sent from iOS and which is triggered when the
+    // safe area insets change. Not adding this extra padding on iOS will cause the content of the scrollview
+    // to be hidden behind the rounded corners of the paywall.
+    const [paddingBottom, setPaddingBottom] = useState(20);
+    useEffect(() => {
+      const handleSafeAreaInsetsChange = ({
+        bottom
+      }) => {
+        setPaddingBottom(20 + bottom);
+      };
+      const subscription = eventEmitter.addListener('safeAreaInsetsDidChange', handleSafeAreaInsetsChange);
+      return () => {
+        subscription.remove();
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(View, {
+      style: [{
+        flex: 1
+      }, style]
+    }, /*#__PURE__*/React.createElement(ScrollView, {
+      contentContainerStyle: {
+        flexGrow: 1,
+        paddingBottom
+      }
+    }, children), /*#__PURE__*/React.createElement(InternalPaywallFooterView, {
+      style: {
+        marginTop: -20
+      }
+    }));
+  };
 }
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeModules","RNPaywalls","presentPaywall","presentPaywallIfNeeded","requiredEntitlementIdentifier"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"AAAA,SAASA,aAAa,QAAQ,cAAc;AAE5C,MAAMC,UAAU,GAAGD,aAAa,CAACC,UAAU;AAE3C,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B;EACAD,UAAU,CAACC,cAAc,CAAC,CAAC;AAC7B;AAEA,OAAO,SAASC,sBAAsBA,CAACC,6BAAqC,EAAE;EAC5E;EACAH,UAAU,CAACE,sBAAsB,CAACC,6BAA6B,CAAC;AAClE"}
+{"version":3,"names":["NativeEventEmitter","NativeModules","Platform","requireNativeComponent","ScrollView","UIManager","View","PAYWALL_RESULT","React","useEffect","useState","LINKING_ERROR","select","ios","default","RNPaywalls","eventEmitter","InternalPaywall","getViewManagerConfig","Error","InternalPaywallFooterView","RevenueCatUI","presentPaywall","presentPaywallIfNeeded","requiredEntitlementIdentifier","Paywall","props","createElement","_extends","style","flex","PaywallFooterContainerView","children","paddingBottom","setPaddingBottom","handleSafeAreaInsetsChange","bottom","subscription","addListener","remove","contentContainerStyle","flexGrow","marginTop"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";AAAA,SACEA,kBAAkB,EAClBC,aAAa,EACbC,QAAQ,EACRC,sBAAsB,EACtBC,UAAU,EAEVC,SAAS,EACTC,IAAI,QAEC,cAAc;AACrB,SAASC,cAAc,QAAQ,2CAA2C;AAC1E,OAAOC,KAAK,IAAoBC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAElE,SAASH,cAAc,QAAQ,2CAA2C;AAE1E,MAAMI,aAAa,GAChB,sFAAqF,GACtFT,QAAQ,CAACU,MAAM,CAAC;EAACC,GAAG,EAAE,gCAAgC;EAAEC,OAAO,EAAE;AAAE,CAAC,CAAC,GACrE,sDAAsD,GACtD,+BAA+B;AAEjC,MAAMC,UAAU,GAAGd,aAAa,CAACc,UAAU;AAE3C,MAAMC,YAAY,GAAG,IAAIhB,kBAAkB,CAACe,UAAU,CAAC;AAOvD,MAAME,eAAe,GACnBZ,SAAS,CAACa,oBAAoB,CAAC,SAAS,CAAC,IAAI,IAAI,GAC7Cf,sBAAsB,CAAmB,SAAS,CAAC,GACnD,MAAM;EACN,MAAM,IAAIgB,KAAK,CAACR,aAAa,CAAC;AAChC,CAAC;AAEL,MAAMS,yBAAyB,GAAGf,SAAS,CAACa,oBAAoB,CAAC,SAAS,CAAC,IAAI,IAAI,GAC/Ef,sBAAsB,CAAmB,qBAAqB,CAAC,GAC/D,MAAM;EACN,MAAM,IAAIgB,KAAK,CAACR,aAAa,CAAC;AAChC,CAAC;AAYH,eAAe,MAAMU,YAAY,CAAC;EAEhC;AACF;AACA;AACA;AACA;EACE,OAAcd,cAAc,GAAGA,cAAc;EAE7C,OAAce,cAAcA,CAAC,CAAuB,CAAC,GAAG,CAAC,CAAC,EAA2B;IACnF,OAAOP,UAAU,CAACO,cAAc,CAAC,CAAC;EACpC;EAEA,OAAcC,sBAAsBA,CAAC;IAACC;EAA2D,CAAC,EAA2B;IAC3H,OAAOT,UAAU,CAACQ,sBAAsB,CAACC,6BAA6B,CAAC;EACzE;EAEA,OAAcC,OAAO,GAAgCC,KAAK,iBACxDlB,KAAA,CAAAmB,aAAA,CAACV,eAAe,EAAAW,QAAA,KAAKF,KAAK;IAAEG,KAAK,EAAE,CAAC;MAACC,IAAI,EAAE;IAAC,CAAC,EAAEJ,KAAK,CAACG,KAAK;EAAE,EAAC,CAC9D;EAED,OAAcE,0BAA0B,GAA+BA,CAAC;IAACF,KAAK;IAAEG;EAAQ,CAAC,KAAK;IAC5F;IACA;IACA;IACA;IACA,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGxB,QAAQ,CAAC,EAAE,CAAC;IAEtDD,SAAS,CAAC,MAAM;MAKd,MAAM0B,0BAA0B,GAAGA,CAAC;QAAEC;MAAyC,CAAC,KAAK;QACnFF,gBAAgB,CAAC,EAAE,GAAGE,MAAM,CAAC;MAC/B,CAAC;MAED,MAAMC,YAAY,GAAGrB,YAAY,CAACsB,WAAW,CAC3C,yBAAyB,EACzBH,0BACF,CAAC;MAED,OAAO,MAAM;QACXE,YAAY,CAACE,MAAM,CAAC,CAAC;MACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,oBACE/B,KAAA,CAAAmB,aAAA,CAACrB,IAAI;MAACuB,KAAK,EAAE,CAAC;QAACC,IAAI,EAAE;MAAC,CAAC,EAAED,KAAK;IAAE,gBAC9BrB,KAAA,CAAAmB,aAAA,CAACvB,UAAU;MAACoC,qBAAqB,EAAE;QAACC,QAAQ,EAAE,CAAC;QAAER;MAAa;IAAE,GAC7DD,QACS,CAAC,eAEbxB,KAAA,CAAAmB,aAAA,CAACP,yBAAyB;MAACS,KAAK,EAAE;QAACa,SAAS,EAAE,CAAC;MAAE;IAAE,CAAC,CAChD,CAAC;EAEX,CAAC;AACH"}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,29 @@
-export declare function presentPaywall(): void;
-export declare function presentPaywallIfNeeded(requiredEntitlementIdentifier: String): void;
+import { type StyleProp, type ViewStyle } from "react-native";
+import { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+import React, { type ReactNode } from "react";
+export { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+type PaywallViewProps = {
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+export interface PresentPaywallParams {
+}
+export type PresentPaywallIfNeededParams = PresentPaywallParams & {
+    /**
+     * The paywall will only be presented if this entitlement is not active.
+     */
+    requiredEntitlementIdentifier: string;
+};
+export default class RevenueCatUI {
+    /**
+     * The result of presenting a paywall. This will be the last situation the user experienced before the paywall closed.
+     * @readonly
+     * @enum {string}
+     */
+    static PAYWALL_RESULT: typeof PAYWALL_RESULT;
+    static presentPaywall({}?: PresentPaywallParams): Promise<PAYWALL_RESULT>;
+    static presentPaywallIfNeeded({ requiredEntitlementIdentifier }: PresentPaywallIfNeededParams): Promise<PAYWALL_RESULT>;
+    static Paywall: React.FC<PaywallViewProps>;
+    static PaywallFooterContainerView: React.FC<PaywallViewProps>;
+}
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,SAG7B;AAED,wBAAgB,sBAAsB,CAAC,6BAA6B,EAAE,MAAM,QAG3E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAC3E,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAY3E,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAeF,MAAM,WAAW,oBAAoB;CACpC;AAED,MAAM,MAAM,4BAA4B,GAAG,oBAAoB,GAAG;IAChE;;OAEG;IACH,6BAA6B,EAAE,MAAM,CAAC;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,YAAY;IAE/B;;;;OAIG;IACH,OAAc,cAAc,wBAAkB;WAEhC,cAAc,CAAC,EAAE,GAAE,oBAAyB,GAAG,OAAO,CAAC,cAAc,CAAC;WAItE,sBAAsB,CAAC,EAAC,6BAA6B,EAAC,EAAE,4BAA4B,GAAG,OAAO,CAAC,cAAc,CAAC;IAI5H,OAAc,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAE/C;IAEF,OAAc,0BAA0B,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAmClE;CACH"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-purchases-ui",
   "title": "React Native Purchases UI",
-  "version": "7.15.0-rc.1",
+  "version": "7.15.0",
   "description": "React Native in-app purchases and subscriptions made easy. Supports iOS and Android.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -51,8 +51,8 @@
   "readmeFilename": "README.md",
   "devDependencies": {
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "0.70.0",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "jest": "^28.1.1",
     "jest-react-native": "^18.0.0",
     "pod-install": "^0.1.0",
@@ -67,7 +67,9 @@
     "typescript": "^5.0.2"
   },
   "resolutions": {
-    "@types/react": "17.0.21"
+    "@types/react": "18.2.0",
+    "@types/react-native": "0.73.1",
+    "@types/react-dom": "18.2.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -109,6 +111,7 @@
     ]
   },
   "dependencies": {
-    "react-native-purchases": "7.15.0-rc.1"
+    "@revenuecat/purchases-typescript-internal": "8.10.1",
+    "react-native-purchases": "7.15.0"
   }
 }

package/src/index.tsx

@@ -1,13 +1,112 @@
-import { NativeModules } from "react-native";
+import {
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+  requireNativeComponent,
+  ScrollView,
+  type StyleProp,
+  UIManager,
+  View,
+  type ViewStyle,
+} from "react-native";
+import { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+import React, { type ReactNode, useEffect, useState } from "react";
+
+export { PAYWALL_RESULT } from "@revenuecat/purchases-typescript-internal";
+
+const LINKING_ERROR =
+  `The package 'react-native-purchases-view' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ios: "- You have run 'pod install'\n", default: ''}) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n';
 
 const RNPaywalls = NativeModules.RNPaywalls;
 
-export function presentPaywall() {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywall();
+const eventEmitter = new NativeEventEmitter(RNPaywalls);
+
+type PaywallViewProps = {
+  style?: StyleProp<ViewStyle>;
+  children?: ReactNode;
+};
+
+const InternalPaywall =
+  UIManager.getViewManagerConfig('Paywall') != null
+    ? requireNativeComponent<PaywallViewProps>('Paywall')
+    : () => {
+      throw new Error(LINKING_ERROR);
+    };
+
+const InternalPaywallFooterView = UIManager.getViewManagerConfig('Paywall') != null
+  ? requireNativeComponent<PaywallViewProps>('RCPaywallFooterView')
+  : () => {
+    throw new Error(LINKING_ERROR);
+  };
+
+export interface PresentPaywallParams {
+}
+
+export type PresentPaywallIfNeededParams = PresentPaywallParams & {
+  /**
+   * The paywall will only be presented if this entitlement is not active.
+   */
+  requiredEntitlementIdentifier: string;
 }
 
-export function presentPaywallIfNeeded(requiredEntitlementIdentifier: String) {
-  // TODO: check iOS/Android version
-  RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+export default class RevenueCatUI {
+
+  /**
+   * The result of presenting a paywall. This will be the last situation the user experienced before the paywall closed.
+   * @readonly
+   * @enum {string}
+   */
+  public static PAYWALL_RESULT = PAYWALL_RESULT;
+
+  public static presentPaywall({}: PresentPaywallParams = {}): Promise<PAYWALL_RESULT> {
+    return RNPaywalls.presentPaywall();
+  }
+
+  public static presentPaywallIfNeeded({requiredEntitlementIdentifier}: PresentPaywallIfNeededParams): Promise<PAYWALL_RESULT> {
+    return RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier);
+  }
+
+  public static Paywall: React.FC<PaywallViewProps> = (props) => (
+    <InternalPaywall {...props} style={[{flex: 1}, props.style]}/>
+  );
+
+  public static PaywallFooterContainerView: React.FC<PaywallViewProps> = ({style, children}) => {
+    // We use 20 as the default paddingBottom because that's the corner radius in the Android native SDK.
+    // We also listen to safeAreaInsetsDidChange which is only sent from iOS and which is triggered when the
+    // safe area insets change. Not adding this extra padding on iOS will cause the content of the scrollview
+    // to be hidden behind the rounded corners of the paywall.
+    const [paddingBottom, setPaddingBottom] = useState(20);
+
+    useEffect(() => {
+      interface HandleSafeAreaInsetsChangeParams {
+        bottom: number;
+      }
+
+      const handleSafeAreaInsetsChange = ({ bottom }: HandleSafeAreaInsetsChangeParams) => {
+        setPaddingBottom(20 + bottom);
+      };
+
+      const subscription = eventEmitter.addListener(
+        'safeAreaInsetsDidChange',
+        handleSafeAreaInsetsChange
+      );
+
+      return () => {
+        subscription.remove();
+      };
+    }, []);
+
+    return (
+      <View style={[{flex: 1}, style]}>
+        <ScrollView contentContainerStyle={{flexGrow: 1, paddingBottom}}>
+          {children}
+        </ScrollView>
+        {/*Adding negative margin to the footer view to make it overlap with the extra padding of the scroll*/}
+        <InternalPaywallFooterView style={{marginTop: -20}}/>
+      </View>
+    );
+  };
 }

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

@@ -1,33 +0,0 @@
-package com.revenuecat.purchases.react.ui
-
-import android.app.PendingIntent.getActivity
-import android.content.Context
-import android.util.AttributeSet
-import android.widget.ImageView
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.platform.AbstractComposeView
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.uimanager.SimpleViewManager
-import com.revenuecat.purchases.ui.revenuecatui.ExperimentalPreviewRevenueCatUIPurchasesAPI
-import com.revenuecat.purchases.ui.revenuecatui.Paywall
-import com.revenuecat.purchases.ui.revenuecatui.PaywallOptions
-
-internal class Paywall @JvmOverloads constructor(
-    context: Context,
-    attrs: AttributeSet? = null,
-) : AbstractComposeView(context, attrs) {
-    @OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
-    @Composable
-    override fun Content() {
-        Paywall(
-            PaywallOptions.Builder(
-                dismissRequest = {}
-            )
-                .build()
-        )
-    }
-}

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

@@ -1,18 +0,0 @@
-package com.revenuecat.purchases.react.ui
-
-import com.facebook.react.uimanager.SimpleViewManager
-import com.facebook.react.uimanager.ThemedReactContext
-
-internal class RNPaywallManager : SimpleViewManager<Paywall>() {
-    companion object {
-        const val REACT_CLASS = "RNPaywall"
-    }
-
-    override fun getName(): String {
-        return REACT_CLASS
-    }
-
-    override fun createViewInstance(themedReactContext: ThemedReactContext): Paywall {
-        return Paywall(themedReactContext)
-    }
-}