@scribeup/react-native-scribeup 0.3.1 → 0.4.0

package/README.md

@@ -11,11 +11,14 @@ The package is a thin wrapper around the native [iOS](https://github.com/ScribeU
    1. [Bare React-Native](#bare-react-native)
    2. [Expo Projects](#expo-projects)
 2. [Quick Start](#quick-start)
-3. [API Reference](#api-reference)
-4. [Example Projects](#example-projects)
-5. [Troubleshooting](#troubleshooting)
-6. [Author](#author)
-7. [License](#license)
+3. [Components](#components)
+   1. [ScribeUp (Full Screen)](#scribeup-full-screen)
+   2. [ScribeUpWidget (Embeddable)](#scribeupwidget-embeddable)
+4. [API Reference](#api-reference)
+5. [Example Projects](#example-projects)
+6. [Troubleshooting](#troubleshooting)
+7. [Author](#author)
+8. [License](#license)
 
 
 ## Installation
@@ -81,9 +84,51 @@ export default function App() {
 
 ---
 
+## Components
+
+The SDK provides two components for different integration scenarios:
+
+### ScribeUp (Full Screen)
+
+The main component that presents a full-screen modal subscription manager.
+
+### ScribeUpWidget (Embeddable)
+
+A lightweight widget view that can be embedded anywhere in your app and sized however you want.
+
+```tsx
+import { ScribeUpWidget, ScribeupWidgetViewRef } from "@scribeup/react-native-scribeup";
+
+export default function MyComponent() {
+  const widgetRef = useRef<ScribeupWidgetViewRef>(null);
+
+  const handleReload = () => {
+    widgetRef.current?.reload();
+  };
+
+
+  return (
+    <ScribeUpWidget
+      ref={widgetRef}
+      url="https://your-subscription-url.com"
+      style={{ width: '100%', height: 400 }}
+    />
+  );
+}
+```
+
+**Key differences from the full-screen component:**
+- Takes only one required parameter: `url`
+- Has no header or navigation controls
+- Can be sized and positioned flexibly
+- Focused purely on displaying web content
+- Provides imperative methods via ref (`reload()`, `loadURL()`)
+
+---
+
 ## API Reference
 
-ScribeUp is a *React component*. Mounting it immediately presents the native subscription-manager UI.
+### ScribeUp (Full Screen)
 
 ```
 <ScribeUp
@@ -93,6 +138,20 @@ ScribeUp is a *React component*. Mounting it immediately presents the native sub
 />
 ```
 
+### ScribeUpWidget (Embeddable)
+
+```
+<ScribeUpWidget
+  url: string;              // required – authenticated manage-subscriptions URL
+  style?: ViewStyle;        // optional – styling for the widget container
+  ref?: ScribeupWidgetViewRef; // optional – ref for imperative methods
+/>
+```
+
+**Ref methods:**
+- `reload()` – reloads the current page
+- `loadURL(url: string)` – loads a new URL
+
 ### Exit Callback
 
 `onExit` receives an object with two optional fields:

package/android/src/main/java/com/rnscribeupsdk/ScribeupPackage.kt

@@ -11,6 +11,6 @@ class RNScribeupSDKPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return emptyList()
+        return listOf(ScribeupWidgetViewManager(reactContext))
     }
 }

package/android/src/main/java/com/rnscribeupsdk/ScribeupWidgetViewManager.kt

@@ -0,0 +1,83 @@
+package com.rnscribeupsdk
+
+import android.view.View
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import io.scribeup.scribeupsdk.ui.SubscriptionManagerWidgetView
+
+class ScribeupWidgetViewManager(private val reactContext: ReactApplicationContext) : SimpleViewManager<SubscriptionManagerWidgetView>() {
+
+    companion object {
+        const val REACT_CLASS = "ScribeupWidgetView"
+        const val COMMAND_RELOAD = 1
+        const val COMMAND_LOAD_URL = 2
+    }
+
+    override fun getName(): String {
+        return REACT_CLASS
+    }
+
+    override fun createViewInstance(reactContext: ThemedReactContext): SubscriptionManagerWidgetView {
+        return SubscriptionManagerWidgetView(reactContext)
+    }
+
+    @ReactProp(name = "url")
+    fun setUrl(view: SubscriptionManagerWidgetView, url: String?) {
+        if (!url.isNullOrEmpty()) {
+            view.loadURL(url)
+        }
+    }
+
+    override fun getCommandsMap(): Map<String, Int>? {
+        return MapBuilder.of(
+            "reload", COMMAND_RELOAD,
+            "loadURL", COMMAND_LOAD_URL
+        )
+    }
+
+    override fun receiveCommand(
+        root: SubscriptionManagerWidgetView,
+        commandId: String?,
+        args: ReadableArray?
+    ) {
+        super.receiveCommand(root, commandId, args)
+        
+        when (commandId?.toIntOrNull()) {
+            COMMAND_RELOAD -> {
+                root.reload()
+            }
+            COMMAND_LOAD_URL -> {
+                if (args != null && args.size() > 0) {
+                    val url = args.getString(0)
+                    if (!url.isNullOrEmpty()) {
+                        root.loadURL(url)
+                    }
+                }
+            }
+        }
+    }
+
+    override fun receiveCommand(
+        root: SubscriptionManagerWidgetView,
+        commandId: Int,
+        args: ReadableArray?
+    ) {
+        when (commandId) {
+            COMMAND_RELOAD -> {
+                root.reload()
+            }
+            COMMAND_LOAD_URL -> {
+                if (args != null && args.size() > 0) {
+                    val url = args.getString(0)
+                    if (!url.isNullOrEmpty()) {
+                        root.loadURL(url)
+                    }
+                }
+            }
+        }
+    }
+}

package/ios/Scribeup.m

@@ -1,5 +1,6 @@
 #import <React/RCTBridgeModule.h>
 #import <React/RCTEventEmitter.h>
+#import <React/RCTViewManager.h>
 
 @interface RCT_EXTERN_MODULE(Scribeup, RCTEventEmitter)
 
@@ -9,3 +10,11 @@ RCT_EXTERN_METHOD(presentWithUrl:(NSString *)url
                   rejecter:(RCTPromiseRejectBlock)reject)
 
 @end
+
+@interface RCT_EXTERN_MODULE(ScribeupWidgetViewManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(url, NSString)
+RCT_EXTERN_METHOD(reload:(nonnull NSNumber *)reactTag)
+RCT_EXTERN_METHOD(loadURL:(nonnull NSNumber *)reactTag url:(NSString *)url)
+
+@end

package/ios/ScribeupWidgetViewManager.swift

@@ -0,0 +1,95 @@
+import Foundation
+import ScribeUpSDK
+import React
+
+@objc(ScribeupWidgetViewManager)
+class ScribeupWidgetViewManager: RCTViewManager {
+
+  override func view() -> UIView! {
+    return ScribeupWidgetView()
+  }
+
+  @objc override static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+  
+  @objc func reload(_ reactTag: NSNumber) {
+    DispatchQueue.main.async {
+      self.bridge.uiManager.addUIBlock { (uiManager, viewRegistry) in
+        if let view = viewRegistry?[reactTag] as? ScribeupWidgetView {
+          view.reload()
+        }
+      }
+    }
+  }
+  
+  @objc func loadURL(_ reactTag: NSNumber, url: String) {
+    DispatchQueue.main.async {
+      self.bridge.uiManager.addUIBlock { (uiManager, viewRegistry) in
+        if let view = viewRegistry?[reactTag] as? ScribeupWidgetView {
+          view.loadURL(url)
+        }
+      }
+    }
+  }
+}
+
+class ScribeupWidgetView: UIView {
+  
+  private var widgetView: SubscriptionManagerWidgetView?
+  private var _url: String = ""
+  
+  @objc var url: String = "" {
+    didSet {
+      _url = url
+      updateWidgetView()
+    }
+  }
+  
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupView()
+  }
+  
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupView()
+  }
+  
+  private func setupView() {
+    backgroundColor = UIColor.clear
+  }
+  
+  private func updateWidgetView() {
+    // Remove existing widget view if any
+    widgetView?.removeFromSuperview()
+    widgetView = nil
+    
+    // Create new widget view if URL is provided
+    if !_url.isEmpty {
+      widgetView = SubscriptionManagerWidgetView(url: _url)
+      
+      if let widgetView = widgetView {
+        addSubview(widgetView)
+        widgetView.translatesAutoresizingMaskIntoConstraints = false
+        
+        NSLayoutConstraint.activate([
+          widgetView.topAnchor.constraint(equalTo: topAnchor),
+          widgetView.bottomAnchor.constraint(equalTo: bottomAnchor),
+          widgetView.leadingAnchor.constraint(equalTo: leadingAnchor),
+          widgetView.trailingAnchor.constraint(equalTo: trailingAnchor)
+        ])
+      }
+    }
+  }
+  
+  // MARK: - Public Methods for React Native
+  
+  @objc func reload() {
+    widgetView?.reload()
+  }
+  
+  @objc func loadURL(_ urlString: String) {
+    widgetView?.loadURL(urlString)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scribeup/react-native-scribeup",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -52,8 +52,8 @@
   },
   "config": {
     "nativeSDKVersions": {
-      "android": "0.7.1",
-      "ios": "0.7.7"
+      "android": "0.8.0",
+      "ios": "0.8.0"
     }
   }
 }

package/src/ScribeUpWidget.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface ScribeupWidgetViewProps {
+    /**
+     * The URL to load in the widget
+     */
+    url: string;
+    
+    /**
+     * Optional style for the widget container
+     */
+    style?: ViewStyle;
+}
+
+export interface ScribeupWidgetViewRef {
+    /**
+     * Reload the current page in the widget
+     */
+    reload: () => void;
+    
+    /**
+     * Load a new URL in the widget
+     * @param url The new URL to load
+     */
+    loadURL: (url: string) => void;
+}
+
+/**
+ * ScribeUp Widget Component
+ * 
+ * A lightweight widget view that displays a webview for subscription management.
+ * This is a flexible alternative to the full-screen ScribeUp component that can be
+ * embedded anywhere in your app and sized however you want.
+ * 
+ * Unlike the full ScribeUp component, this widget:
+ * - Takes only one required parameter: url
+ * - Has no header or navigation controls
+ * - Is a simple View that can be sized flexibly
+ * - Is focused purely on displaying web content
+ */
+declare const ScribeUpWidget: React.ForwardRefExoticComponent<
+    ScribeupWidgetViewProps & React.RefAttributes<ScribeupWidgetViewRef>
+>;
+
+export default ScribeUpWidget;

package/src/ScribeUpWidget.tsx

@@ -0,0 +1,121 @@
+import React, { useRef, useImperativeHandle, forwardRef } from 'react';
+import { ViewStyle, UIManager, findNodeHandle, Platform } from 'react-native';
+import { requireNativeComponent } from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'scribeup-react-native-scribeup' 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";
+
+const ComponentName = 'ScribeupWidgetView';
+
+const ScribeupWidgetViewNative =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<ScribeupWidgetViewProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };
+
+export interface ScribeupWidgetViewProps {
+  /**
+   * The URL to load in the widget
+   */
+  url: string;
+  
+  /**
+   * Optional style for the widget container
+   */
+  style?: ViewStyle;
+}
+
+export interface ScribeupWidgetViewRef {
+  /**
+   * Reload the current page in the widget
+   */
+  reload: () => void;
+  
+  /**
+   * Load a new URL in the widget
+   * @param url The new URL to load
+   */
+  loadURL: (url: string) => void;
+}
+
+/**
+ * ScribeUp Widget Component
+ * 
+ * A lightweight widget view that displays a webview for subscription management.
+ * This is a flexible alternative to the full-screen ScribeUp component that can be
+ * embedded anywhere in your app and sized however you want.
+ * 
+ * Unlike the full ScribeUp component, this widget:
+ * - Takes only one required parameter: url
+ * - Has no header or navigation controls
+ * - Is a simple View that can be sized flexibly
+ * - Is focused purely on displaying web content
+ * 
+ * @example
+ * ```tsx
+ * import { ScribeUpWidget } from 'scribeup-react-native-scribeup';
+ * 
+ * const MyComponent = () => {
+ *   const widgetRef = useRef<ScribeupWidgetViewRef>(null);
+ * 
+ *   const handleReload = () => {
+ *     widgetRef.current?.reload();
+ *   };
+ * 
+ * 
+ *   return (
+ *     <ScribeUpWidget
+ *       ref={widgetRef}
+ *       url="https://your-subscription-url.com"
+ *       style={{ width: '100%', height: 400 }}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const ScribeUpWidget = forwardRef<ScribeupWidgetViewRef, ScribeupWidgetViewProps>(
+  ({ url, style }, ref) => {
+    const nativeRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      reload: () => {
+        const viewId = findNodeHandle(nativeRef.current);
+        if (viewId) {
+          if (Platform.OS === 'ios') {
+            UIManager.dispatchViewManagerCommand(viewId, 'reload', []);
+          } else {
+            UIManager.dispatchViewManagerCommand(viewId, UIManager.getViewManagerConfig(ComponentName).Commands.reload, []);
+          }
+        }
+      },
+      loadURL: (newUrl: string) => {
+        const viewId = findNodeHandle(nativeRef.current);
+        if (viewId) {
+          if (Platform.OS === 'ios') {
+            UIManager.dispatchViewManagerCommand(viewId, 'loadURL', [newUrl]);
+          } else {
+            UIManager.dispatchViewManagerCommand(viewId, UIManager.getViewManagerConfig(ComponentName).Commands.loadURL, [newUrl]);
+          }
+        }
+      },
+    }));
+
+    return (
+      <ScribeupWidgetViewNative
+        ref={nativeRef}
+        url={url}
+        style={style}
+      />
+    );
+  }
+);
+
+ScribeUpWidget.displayName = 'ScribeUpWidget';
+
+export default ScribeUpWidget;

package/src/index.d.ts

@@ -1,2 +1,5 @@
 import ScribeUp from "./ScribeUp";
+import ScribeUpWidget from "./ScribeUpWidget";
+
+export { ScribeUpWidget };
 export default ScribeUp;

package/src/index.ts

@@ -1,3 +1,5 @@
 import ScribeUp from "./ScribeUp";
+import ScribeUpWidget from "./ScribeUpWidget";
 
+export { ScribeUpWidget };
 export default ScribeUp;