@pnlight/sdk-react-native 0.4.0 → 0.4.1

package/RemoteUiView.js

@@ -0,0 +1,43 @@
+"use strict";
+
+const React = require("react");
+const { requireNativeComponent } = require("react-native");
+const { getUIConfig } = require(".");
+
+const NativeRemoteUiView = requireNativeComponent("RemoteUiView");
+
+/**
+ * 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)
+ */
+function RemoteUiView({ placement, style, cardId }) {
+  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]);
+
+  return (
+    <NativeRemoteUiView
+      style={[{ minHeight: 1 }, style]}
+      config={config}
+      cardId={cardIdToUse}
+    />
+  );
+}
+
+module.exports = { RemoteUiView };

package/app.plugin.js

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

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

@@ -2,7 +2,7 @@ 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
+/// Shows loading until config is set and loaded; supports error state and optional secure container.
 @objc(RemoteUiView)
 final class RemoteUiView: UIView {
 
@@ -10,30 +10,143 @@ final class RemoteUiView: UIView {
   private static let divKitComponents = DivKitComponents()
   private var currentCardId: String = "pnlight_card"
 
+  private let loadingIndicator: UIActivityIndicatorView
+  private let errorLabel: UILabel
+  private var secureContainer: UIView?
+
   override init(frame: CGRect) {
     self.divView = DivView(divKitComponents: Self.divKitComponents)
+    self.loadingIndicator = UIActivityIndicatorView(style: .large)
+    self.errorLabel = UILabel()
+
     super.init(frame: frame)
+
+    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")
   }
 
+  /// Creates a secure container that hides content during screenshots and screen recording.
+  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
+  }
+
   /// Renders the given DivKit JSON string. Pass nil to show blank (e.g. while loading).
   private func applyConfig(configJson: String?, cardId: String) {
     guard let configJson = 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
+    }
   }
 
   // MARK: - React Native view props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pnlight/sdk-react-native",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React Native wrapper for PNLight iOS binary SDK",
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,16 +10,29 @@
     "index.d.ts",
     "ios",
     "PNLight.xcframework",
-    "PNLightSDK-ReactNative.podspec"
+    "PNLightSDK-ReactNative.podspec",
+    "RemoteUiView.js",
+    "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;