@pnlight/sdk-react-native 0.4.0 → 0.4.2

package/RemoteUiView.d.ts

@@ -0,0 +1,62 @@
+import { StyleProp, ViewStyle } from "react-native";
+
+export interface ActionEvent {
+  /**
+   * Full URL from the action (e.g., "myapp://button-clicked?id=primary")
+   * Note: Only custom URL schemes are passed to this callback.
+   * Standard http/https URLs are handled automatically by DivKit.
+   */
+  url: string;
+
+  /**
+   * URL scheme (e.g., "myapp", "app")
+   * Note: Will never be "http" or "https" as those are handled automatically.
+   */
+  scheme: string;
+
+  /**
+   * URL path (e.g., "/button-clicked")
+   */
+  path: string;
+
+  /**
+   * Parsed query parameters as key-value pairs
+   */
+  params: { [key: string]: string };
+
+  /**
+   * DivKit log ID (if available)
+   */
+  logId?: string;
+}
+
+export interface RemoteUiViewProps {
+  /**
+   * Placement ID passed to getUIConfig(placement)
+   */
+  placement: string;
+
+  /**
+   * Optional style for the container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Optional DivKit card ID (defaults to placement-based ID)
+   */
+  cardId?: string;
+
+  /**
+   * Callback for handling button clicks with custom URL schemes.
+   * Only called for custom schemes (myapp://, app://, etc.).
+   * Standard http/https URLs are handled automatically by DivKit.
+   * @param event - Action event containing URL, scheme, path, params, and logId
+   */
+  onAction?: (event: ActionEvent) => void;
+}
+
+/**
+ * Remote UI view: fetches UI config for the given placement via getUIConfig,
+ * shows nothing while loading, then renders the config in a native DivKit view.
+ */
+export function RemoteUiView(props: RemoteUiViewProps): JSX.Element;

package/RemoteUiView.js

@@ -0,0 +1,58 @@
+"use strict";
+
+const React = require("react");
+const { requireNativeComponent } = require("react-native");
+
+const NativeRemoteUiView = requireNativeComponent("RemoteUiView");
+
+async function getUIConfig(placement) {
+  return await NativeRemoteUiView.getUIConfig(placement);
+}
+
+/**
+ * Remote UI view: fetches UI config for the given placement via getUIConfig,
+ * shows nothing while loading, then renders the config in a native DivKit view.
+ *
+ * @param {object} props
+ * @param {string} props.placement - Placement id passed to getUIConfig(placement)
+ * @param {object} props.style - Optional style for the container
+ * @param {string} [props.cardId] - Optional DivKit card id (defaults to placement-based)
+ * @param {function} [props.onAction] - Callback for handling button clicks and custom actions
+ */
+function RemoteUiView({ placement, style, cardId, onAction }) {
+  const [config, setConfig] = React.useState(null);
+  const cardIdToUse =
+    cardId ?? (placement ? `pnlight_${placement}` : "pnlight_card");
+
+  React.useEffect(() => {
+    if (!placement) return;
+    let cancelled = false;
+    getUIConfig(placement).then((uiConfig) => {
+      if (cancelled) return;
+      setConfig(uiConfig?.config ?? null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [placement]);
+
+  const handleAction = React.useCallback(
+    (event) => {
+      if (onAction) {
+        onAction(event.nativeEvent);
+      }
+    },
+    [onAction],
+  );
+
+  return (
+    <NativeRemoteUiView
+      style={[{ minHeight: 1, flex: 1 }, style]}
+      config={config}
+      cardId={cardIdToUse}
+      onAction={handleAction}
+    />
+  );
+}
+
+module.exports = { RemoteUiView };

package/app.plugin.js

@@ -0,0 +1,3 @@
+"use strict";
+
+module.exports = require("./plugin");

package/ios/PNLightSDK.m

@@ -2,9 +2,12 @@
 @import PNLight;
 
 @interface RCT_EXTERN_MODULE(PNLightRN, NSObject)
-RCT_EXTERN_METHOD(initialize:(NSString *)apiKey resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(initialize:(NSString *)apiKey baseDomain:(NSString *)baseDomain resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(validatePurchase:(BOOL)captcha resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(logEvent:(NSString *)eventName eventArgs:(NSDictionary *)eventArgs resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(getUserId:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(resetUserId:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
+RCT_EXTERN_METHOD(addAttribution:(NSString *)providerString data:(NSDictionary *)data identifier:(NSString *)identifier resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(prefetchUIConfig:(NSString *)placement resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(getUIConfig:(NSString *)placement resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 @end

package/ios/PNLightSDK.swift

@@ -26,12 +26,12 @@ class PNLightRNModule: NSObject {
     }
   }
 
-  @objc func getUserId(_ resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+  @objc func getUserId(resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
     let userId = PNLightSDK.shared.getOrCreateUserId().id
     resolve(userId)
   }
 
-  @objc func resetUserId(_ resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
+  @objc func resetUserId(resolver resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
     PNLightSDK.shared.resetUserId()
     resolve(nil)
   }

package/ios/RemoteUiView.swift

@@ -1,45 +1,237 @@
 import UIKit
 import DivKit
 
-/// Native UIView that renders PNLight UI config (DivKit JSON) inside a DivView.
-/// Shows nothing until config is set; then renders via DivKit per https://divkit.tech/docs/en/quickstart/ios
 @objc(RemoteUiView)
 final class RemoteUiView: UIView {
 
+  // MARK: - URL handler for DivKit
+  private final class RemoteUiUrlHandler: DivUrlHandler {
+    weak var owner: RemoteUiView?
+
+    func handle(_ url: URL, info: DivActionInfo, sender: AnyObject?) {
+      guard let owner else { return }
+
+      if owner.isCustomAction(url) {
+        owner.handleDivAction(info) // send to RN
+        return
+      }
+
+      // Default behavior for normal links
+      if url.scheme?.lowercased() == "http" || url.scheme?.lowercased() == "https" {
+        DispatchQueue.main.async {
+          UIApplication.shared.open(url, options: [:], completionHandler: nil)
+        }
+      } else {
+        // Other non-http(s) schemes: either treat as custom or try open
+        DispatchQueue.main.async {
+          UIApplication.shared.open(url, options: [:], completionHandler: nil)
+        }
+      }
+    }
+
+    // Backward compatible overload (DivKit may call this)
+    func handle(_ url: URL, sender: AnyObject?) {
+      // If DivKit calls the short version, we still try to open it
+      DispatchQueue.main.async {
+        UIApplication.shared.open(url, options: [:], completionHandler: nil)
+      }
+    }
+  }
+
   private let divView: DivView
-  private static let divKitComponents = DivKitComponents()
+  private let divKitComponents: DivKitComponents
+  private let urlHandler: RemoteUiUrlHandler
+
   private var currentCardId: String = "pnlight_card"
 
+  private let loadingIndicator: UIActivityIndicatorView
+  private let errorLabel: UILabel
+  private var secureContainer: UIView?
+
+  @objc var onAction: (([String: Any]) -> Void)?
+
   override init(frame: CGRect) {
-    self.divView = DivView(divKitComponents: Self.divKitComponents)
+    self.loadingIndicator = UIActivityIndicatorView(style: .large)
+    self.errorLabel = UILabel()
+
+    // Create url handler first (needed for DivKitComponents init)
+    self.urlHandler = RemoteUiUrlHandler()
+
+    // Pass urlHandler via initializer (actionHandler is a let constant inside DivKitComponents)
+    self.divKitComponents = DivKitComponents(urlHandler: urlHandler)
+    self.divView = DivView(divKitComponents: divKitComponents)
+
     super.init(frame: frame)
+
+    // bind back-reference
+    self.urlHandler.owner = self
+
+    backgroundColor = .clear
+
     divView.translatesAutoresizingMaskIntoConstraints = false
-    addSubview(divView)
-    NSLayoutConstraint.activate([
-      divView.topAnchor.constraint(equalTo: topAnchor),
-      divView.leadingAnchor.constraint(equalTo: leadingAnchor),
-      divView.trailingAnchor.constraint(equalTo: trailingAnchor),
-      divView.bottomAnchor.constraint(equalTo: bottomAnchor),
-    ])
+    divView.alpha = 0
+    divView.backgroundColor = .clear
+
+    loadingIndicator.translatesAutoresizingMaskIntoConstraints = false
+    loadingIndicator.hidesWhenStopped = false
+
+    errorLabel.translatesAutoresizingMaskIntoConstraints = false
+    errorLabel.text = "Failed to load DivKit content"
+    errorLabel.textColor = .red
+    errorLabel.textAlignment = .center
+    errorLabel.numberOfLines = 0
+    errorLabel.alpha = 0
+
+    let isSecure = true
+    if isSecure, let secure = Self.makeSecureContainer() {
+      secure.translatesAutoresizingMaskIntoConstraints = false
+      self.secureContainer = secure
+
+      secure.addSubview(divView)
+      secure.addSubview(loadingIndicator)
+      secure.addSubview(errorLabel)
+      addSubview(secure)
+
+      NSLayoutConstraint.activate([
+        secure.topAnchor.constraint(equalTo: topAnchor),
+        secure.leadingAnchor.constraint(equalTo: leadingAnchor),
+        secure.trailingAnchor.constraint(equalTo: trailingAnchor),
+        secure.bottomAnchor.constraint(equalTo: bottomAnchor),
+
+        divView.topAnchor.constraint(equalTo: secure.topAnchor),
+        divView.leadingAnchor.constraint(equalTo: secure.leadingAnchor),
+        divView.trailingAnchor.constraint(equalTo: secure.trailingAnchor),
+        divView.bottomAnchor.constraint(equalTo: secure.bottomAnchor),
+
+        loadingIndicator.centerXAnchor.constraint(equalTo: secure.centerXAnchor),
+        loadingIndicator.centerYAnchor.constraint(equalTo: secure.centerYAnchor),
+
+        errorLabel.topAnchor.constraint(equalTo: secure.topAnchor),
+        errorLabel.leadingAnchor.constraint(equalTo: secure.leadingAnchor),
+        errorLabel.trailingAnchor.constraint(equalTo: secure.trailingAnchor),
+        errorLabel.bottomAnchor.constraint(equalTo: secure.bottomAnchor),
+      ])
+    } else {
+      addSubview(divView)
+      addSubview(loadingIndicator)
+      addSubview(errorLabel)
+
+      NSLayoutConstraint.activate([
+        divView.topAnchor.constraint(equalTo: topAnchor),
+        divView.leadingAnchor.constraint(equalTo: leadingAnchor),
+        divView.trailingAnchor.constraint(equalTo: trailingAnchor),
+        divView.bottomAnchor.constraint(equalTo: bottomAnchor),
+
+        loadingIndicator.centerXAnchor.constraint(equalTo: centerXAnchor),
+        loadingIndicator.centerYAnchor.constraint(equalTo: centerYAnchor),
+
+        errorLabel.topAnchor.constraint(equalTo: topAnchor),
+        errorLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
+        errorLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
+        errorLabel.bottomAnchor.constraint(equalTo: bottomAnchor),
+      ])
+    }
   }
 
   required init?(coder: NSCoder) {
     fatalError("init(coder:) has not been implemented")
   }
 
-  /// Renders the given DivKit JSON string. Pass nil to show blank (e.g. while loading).
+  private static func makeSecureContainer() -> UIView? {
+    let textField = UITextField()
+    textField.isSecureTextEntry = true
+    textField.isUserInteractionEnabled = false
+
+    guard let secureLayer = textField.layer.sublayers?.first,
+          let secureView = secureLayer.delegate as? UIView else {
+      return nil
+    }
+
+    secureView.subviews.forEach { $0.removeFromSuperview() }
+    secureView.isUserInteractionEnabled = true
+    secureView.backgroundColor = .clear
+    return secureView
+  }
+
   private func applyConfig(configJson: String?, cardId: String) {
-    guard let configJson = configJson, !configJson.isEmpty,
+    guard let configJson, !configJson.isEmpty,
           let jsonData = configJson.data(using: .utf8) else {
       return
     }
-    divView.setSource(DivViewSource(kind: .data(jsonData), cardId: cardId))
+
+    errorLabel.alpha = 0
+    errorLabel.text = "Failed to load DivKit content"
+    loadingIndicator.startAnimating()
+    loadingIndicator.alpha = 1
+    divView.alpha = 0
+
+    let source = DivViewSource(
+      kind: .data(jsonData),
+      cardId: DivCardID(rawValue: cardId) ?? "divkit"
+    )
+
+    Task { @MainActor in
+      do {
+        try await self.divView.setSource(source)
+        self.showContent()
+      } catch {
+        self.showError(error: error)
+      }
+    }
+  }
+
+  private func showContent() {
+    loadingIndicator.stopAnimating()
+    UIView.animate(withDuration: 0.3) {
+      self.loadingIndicator.alpha = 0
+      self.divView.alpha = 1
+    }
+  }
+
+  private func showError(error: Error) {
+    errorLabel.text = "Failed to load DivKit content:\n\(error.localizedDescription)"
+    loadingIndicator.stopAnimating()
+    UIView.animate(withDuration: 0.3) {
+      self.loadingIndicator.alpha = 0
+      self.errorLabel.alpha = 1
+    }
+  }
+
+  private func isCustomAction(_ url: URL) -> Bool {
+    guard let scheme = url.scheme?.lowercased() else { return false }
+    return scheme != "http" && scheme != "https"
+  }
+
+  private func handleDivAction(_ action: DivActionInfo) {
+    guard let onAction else { return }
+
+    var payload: [String: Any] = [:]
+
+    if let url = action.url {
+      payload["url"] = url.absoluteString
+
+      if let components = URLComponents(url: url, resolvingAgainstBaseURL: false) {
+        payload["scheme"] = components.scheme ?? ""
+        payload["path"] = components.path
+
+        if let queryItems = components.queryItems {
+          var params: [String: String] = [:]
+          for item in queryItems {
+            params[item.name] = item.value ?? ""
+          }
+          payload["params"] = params
+        }
+      }
+    }
+
+    payload["logId"] = action.logId
+
+    onAction(payload)
   }
 
-  // MARK: - React Native view props
+  // MARK: - React Native props
   @objc func setConfig(_ value: NSString?) {
-    let json = value as String?
-    applyConfig(configJson: json, cardId: currentCardId)
+    applyConfig(configJson: value as String?, cardId: currentCardId)
   }
 
   @objc func setCardId(_ value: NSString?) {

package/ios/RemoteUiViewManager.m

@@ -3,4 +3,5 @@
 @interface RCT_EXTERN_MODULE(RemoteUiViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(config, NSString)
 RCT_EXPORT_VIEW_PROPERTY(cardId, NSString)
+RCT_EXPORT_VIEW_PROPERTY(onAction, RCTDirectEventBlock)
 @end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pnlight/sdk-react-native",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "React Native wrapper for PNLight iOS binary SDK",
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,16 +10,30 @@
     "index.d.ts",
     "ios",
     "PNLight.xcframework",
-    "PNLightSDK-ReactNative.podspec"
+    "PNLightSDK-ReactNative.podspec",
+    "RemoteUiView.js",
+    "RemoteUiView.d.ts",
+    "app.plugin.js",
+    "plugin"
   ],
   "keywords": [
     "pnlight",
     "analytics",
     "in-app-purchase",
-    "ios"
+    "ios",
+    "expo"
   ],
   "author": "PNLight",
   "license": "Commercial",
+  "peerDependencies": {
+    "react-native": "*",
+    "expo": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
+  },
   "scripts": {
     "prepare": "node ./scripts/copy-xcframework.js",
     "publish:dry": "npm pack",

package/plugin/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+const { withIosPodfileSource } = require("./withIos");
+
+/**
+ * Expo config plugin for @pnlight/sdk-react-native.
+ * Configures the iOS Podfile with the DivKit source required by RemoteUiView.
+ *
+ * Usage in app.json / app.config.js:
+ *   "plugins": ["@pnlight/sdk-react-native"]
+ */
+function withPNLightSDK(config) {
+  config = withIosPodfileSource(config);
+  return config;
+}
+
+module.exports = withPNLightSDK;

package/plugin/withIos.js

@@ -0,0 +1,39 @@
+"use strict";
+
+const { withDangerousMod } = require("expo/config-plugins");
+const fs = require("fs");
+const path = require("path");
+
+const DIVKIT_SOURCE = "source 'https://github.com/divkit/divkit-ios.git'";
+const DIVKIT_MARKER = "divkit-ios";
+
+/**
+ * Adds DivKit CocoaPods source to the Podfile (required by PNLightSDK-ReactNative for RemoteUiView).
+ * Idempotent: safe to run prebuild multiple times.
+ */
+function withIosPodfileSource(config) {
+  return withDangerousMod(config, [
+    "ios",
+    async (config) => {
+      const podfilePath = path.join(
+        config.modRequest.platformProjectRoot,
+        "Podfile"
+      );
+      let contents = await fs.promises.readFile(podfilePath, "utf8");
+
+      if (contents.includes(DIVKIT_MARKER)) {
+        return config;
+      }
+
+      const lines = contents.split("\n");
+      const insertIndex =
+        lines.findIndex((line) => /^\s*source\s+['\"]/.test(line)) + 1;
+      const idx = insertIndex > 0 ? insertIndex : 1;
+      lines.splice(idx, 0, DIVKIT_SOURCE);
+      await fs.promises.writeFile(podfilePath, lines.join("\n"));
+      return config;
+    },
+  ]);
+}
+
+module.exports = withIosPodfileSource;