rampkit-expo-dev 0.0.5 → 0.0.7

package/README.md

@@ -1,5 +1,6 @@
 <p align="center">
-  <img src="https://dqplcvw3fzili.cloudfront.net/rampkitlogo.png" height="80" />
+  <br />
+  <img src="https://dqplcvw3fzili.cloudfront.net/rampkitlogo.png" height="110" />
 </p>
 
 <h1 align="center">RampKit Expo SDK</h1>
@@ -37,15 +38,20 @@ npx expo install rampkit-expo-dev
 ```ts
 import { RampKit } from "rampkit-expo-dev";
 
-RampKit.configure({
-  projectId: "YOUR_PROJECT_ID",
+await RampKit.init({
+  apiKey: "YOUR_API_KEY",
+  environment: "production", // optional
+  autoShowOnboarding: false, // optional
+  onOnboardingFinished: (payload) => {
+    // optional callback fired when the flow finishes
+  },
 });
 ```
 
 Show an onboarding:
 
 ```ts
-await RampKit.present();
+RampKit.showOnboarding();
 ```
 
 ---
@@ -53,11 +59,21 @@ await RampKit.present();
 ## Configuration Options
 
 ```ts
-RampKit.configure({
-  projectId: "abc123",
-  userId: "user_42", // optional
-  debug: true, // optional
+await RampKit.init({
+  apiKey: "abc123",
+  environment: "staging", // optional
+  autoShowOnboarding: true, // optional (auto-present after init if data is available)
+  onOnboardingFinished: (payload) => {
+    // optional
+  },
 });
+
+// Access the generated stable user id (stored securely)
+const idFromInit = RampKit.getUserId(); // string | null (available after init)
+
+// Or fetch/generate it directly (always returns a string)
+import { getRampKitUserId } from "rampkit-expo-dev";
+const userId = await getRampKitUserId();
 ```
 
 More examples are in the docs:  
@@ -68,11 +84,19 @@ https://rampkit.com/docs
 ## Example
 
 ```ts
+import { useEffect } from "react";
 import { RampKit } from "rampkit-expo-dev";
 import { Button } from "react-native";
 
 export default function App() {
-  return <Button title="Show Onboarding" onPress={() => RampKit.present()} />;
+  useEffect(() => {
+    // Initialize once in your app
+    RampKit.init({ apiKey: "YOUR_API_KEY" });
+  }, []);
+
+  return (
+    <Button title="Show Onboarding" onPress={() => RampKit.showOnboarding()} />
+  );
 }
 ```
 

package/build/RampKit.d.ts

@@ -4,6 +4,7 @@ export declare class RampKitCore {
     private onboardingData;
     private userId;
     private onOnboardingFinished?;
+    private onShowPaywall?;
     private static readonly ONBOARDING_URL;
     static get instance(): RampKitCore;
     init(config: {
@@ -11,8 +12,11 @@ export declare class RampKitCore {
         environment?: string;
         autoShowOnboarding?: boolean;
         onOnboardingFinished?: (payload?: any) => void;
+        showPaywall?: () => void;
     }): Promise<void>;
     getOnboardingData(): any;
     getUserId(): string | null;
-    showOnboarding(): void;
+    showOnboarding(opts?: {
+        showPaywall?: () => void;
+    }): void;
 }

package/build/RampKit.js

@@ -17,6 +17,7 @@ class RampKitCore {
     async init(config) {
         this.config = config;
         this.onOnboardingFinished = config.onOnboardingFinished;
+        this.onShowPaywall = config.showPaywall;
         try {
             // Ensure a stable, encrypted user id exists on first init
             this.userId = await (0, userId_1.getRampKitUserId)();
@@ -56,7 +57,7 @@ class RampKitCore {
     getUserId() {
         return this.userId;
     }
-    showOnboarding() {
+    showOnboarding(opts) {
         const data = this.onboardingData;
         if (!data || !Array.isArray(data.screens) || data.screens.length === 0) {
             console.log("[RampKit] ShowOnboarding: no onboarding data available");
@@ -109,6 +110,7 @@ class RampKitCore {
                     }
                     catch (_) { }
                 },
+                onShowPaywall: (opts === null || opts === void 0 ? void 0 : opts.showPaywall) || this.onShowPaywall,
             });
         }
         catch (e) {

package/build/RampkitOverlay.d.ts

@@ -13,6 +13,7 @@ export declare function showRampkitOverlay(opts: {
     requiredScripts?: string[];
     onClose?: () => void;
     onOnboardingFinished?: (payload?: any) => void;
+    onShowPaywall?: () => void;
 }): void;
 export declare function hideRampkitOverlay(): void;
 export declare function preloadRampkitOverlay(opts: {
@@ -29,5 +30,6 @@ declare function Overlay(props: {
     prebuiltDocs?: string[];
     onRequestClose: () => void;
     onOnboardingFinished?: (payload?: any) => void;
+    onShowPaywall?: () => void;
 }): any;
 export default Overlay;

package/build/RampkitOverlay.js

@@ -138,7 +138,7 @@ function showRampkitOverlay(opts) {
             var _a;
             hideRampkitOverlay();
             (_a = opts.onClose) === null || _a === void 0 ? void 0 : _a.call(opts);
-        }, onOnboardingFinished: opts.onOnboardingFinished })));
+        }, onOnboardingFinished: opts.onOnboardingFinished, onShowPaywall: opts.onShowPaywall })));
     // Once shown, we can safely discard the preloader sibling if present
     if (preloadSibling) {
         preloadSibling.destroy();
@@ -235,6 +235,8 @@ function Overlay(props) {
     const [firstPageLoaded, setFirstPageLoaded] = (0, react_1.useState)(false);
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [isTransitioning, setIsTransitioning] = (0, react_1.useState)(false);
+    const [isClosing, setIsClosing] = (0, react_1.useState)(false);
+    const overlayOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const fadeOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const allLoaded = loadedCount >= props.screens.length;
     // shared vars across all webviews
@@ -243,6 +245,39 @@ function Overlay(props) {
     const webviewsRef = (0, react_1.useRef)([]);
     // track when we last initialized a given page with host vars (to filter stale defaults)
     const lastInitSendRef = (0, react_1.useRef)([]);
+    // Fade-in when overlay becomes visible
+    react_1.default.useEffect(() => {
+        if (visible && !isClosing) {
+            try {
+                overlayOpacity.stopAnimation();
+            }
+            catch (_) { }
+            overlayOpacity.setValue(0);
+            react_native_1.Animated.timing(overlayOpacity, {
+                toValue: 1,
+                duration: 220,
+                easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [visible, isClosing, overlayOpacity]);
+    const handleRequestClose = react_1.default.useCallback(() => {
+        if (isClosing)
+            return;
+        setIsClosing(true);
+        try {
+            overlayOpacity.stopAnimation();
+        }
+        catch (_) { }
+        react_native_1.Animated.timing(overlayOpacity, {
+            toValue: 0,
+            duration: 220,
+            easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
+            useNativeDriver: true,
+        }).start(() => {
+            props.onRequestClose();
+        });
+    }, [isClosing, overlayOpacity, props.onRequestClose]);
     // Android hardware back goes to previous page, then closes
     const navigateToIndex = (nextIndex) => {
         if (nextIndex === index ||
@@ -312,11 +347,11 @@ function Overlay(props) {
                 navigateToIndex(index - 1);
                 return true;
             }
-            props.onRequestClose();
+            handleRequestClose();
             return true;
         });
         return () => sub.remove();
-    }, [index, props.onRequestClose]);
+    }, [index, handleRequestClose]);
     const docs = (0, react_1.useMemo)(() => props.prebuiltDocs ||
         props.screens.map((s) => buildHtmlDocument(s, props.variables, props.requiredScripts)), [props.prebuiltDocs, props.screens, props.variables, props.requiredScripts]);
     react_1.default.useEffect(() => {
@@ -364,7 +399,7 @@ function Overlay(props) {
         else {
             // finish
             Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch(() => { });
-            props.onRequestClose();
+            handleRequestClose();
         }
     };
     async function handleNotificationPermissionRequest(payload) {
@@ -451,7 +486,11 @@ function Overlay(props) {
         }
         catch (_) { }
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.root, !visible && styles.invisible], pointerEvents: visible ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, onLoadEnd: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+            styles.root,
+            !visible && styles.invisible,
+            visible && { opacity: overlayOpacity },
+        ], pointerEvents: visible && !isClosing ? "auto" : "none", children: [(0, jsx_runtime_1.jsx)(react_native_pager_view_1.default, { ref: pagerRef, style: react_native_1.StyleSheet.absoluteFill, scrollEnabled: false, initialPage: 0, onPageSelected: onPageSelected, offscreenPageLimit: props.screens.length, overScrollMode: "never", children: docs.map((doc, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.page, renderToHardwareTextureAndroid: true, children: (0, jsx_runtime_1.jsx)(react_native_webview_1.WebView, { ref: (r) => (webviewsRef.current[i] = r), style: styles.webview, originWhitelist: ["*"], source: { html: doc }, injectedJavaScriptBeforeContentLoaded: exports.injectedHardening, injectedJavaScript: exports.injectedNoSelect, automaticallyAdjustContentInsets: false, contentInsetAdjustmentBehavior: "never", bounces: false, scrollEnabled: false, overScrollMode: "never", scalesPageToFit: false, showsHorizontalScrollIndicator: false, dataDetectorTypes: "none", allowsLinkPreview: false, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, cacheEnabled: true, javaScriptEnabled: true, domStorageEnabled: true, onLoadEnd: () => {
                             setLoadedCount((c) => c + 1);
                             if (i === 0)
                                 setFirstPageLoaded(true);
@@ -460,7 +499,7 @@ function Overlay(props) {
                                 console.log("[Rampkit] onLoadEnd init send vars", i);
                             sendVarsToWebView(i);
                         }, onMessage: (ev) => {
-                            var _a, _b;
+                            var _a, _b, _c, _d;
                             const raw = ev.nativeEvent.data;
                             console.log("raw", raw);
                             // Accept either raw strings or JSON payloads from your editor
@@ -543,7 +582,15 @@ function Overlay(props) {
                                         (_a = props.onOnboardingFinished) === null || _a === void 0 ? void 0 : _a.call(props, data === null || data === void 0 ? void 0 : data.payload);
                                     }
                                     catch (_) { }
-                                    props.onRequestClose();
+                                    handleRequestClose();
+                                    return;
+                                }
+                                // 6) Request to show paywall
+                                if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:show-paywall") {
+                                    try {
+                                        (_b = props.onShowPaywall) === null || _b === void 0 ? void 0 : _b.call(props);
+                                    }
+                                    catch (_) { }
                                     return;
                                 }
                                 if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:continue" ||
@@ -558,7 +605,7 @@ function Overlay(props) {
                                             navigateToIndex(i - 1);
                                         }
                                         else {
-                                            props.onRequestClose();
+                                            handleRequestClose();
                                         }
                                         return;
                                     }
@@ -580,12 +627,12 @@ function Overlay(props) {
                                         navigateToIndex(i - 1);
                                     }
                                     else {
-                                        props.onRequestClose();
+                                        handleRequestClose();
                                     }
                                     return;
                                 }
                                 if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:close") {
-                                    props.onRequestClose();
+                                    handleRequestClose();
                                     return;
                                 }
                                 if ((data === null || data === void 0 ? void 0 : data.type) === "rampkit:haptic") {
@@ -593,7 +640,7 @@ function Overlay(props) {
                                     return;
                                 }
                             }
-                            catch (_c) {
+                            catch (_e) {
                                 // String path
                                 if (raw === "rampkit:tap" ||
                                     raw === "next" ||
@@ -627,10 +674,17 @@ function Overlay(props) {
                                 }
                                 if (raw === "rampkit:onboarding-finished") {
                                     try {
-                                        (_b = props.onOnboardingFinished) === null || _b === void 0 ? void 0 : _b.call(props, undefined);
+                                        (_c = props.onOnboardingFinished) === null || _c === void 0 ? void 0 : _c.call(props, undefined);
+                                    }
+                                    catch (_) { }
+                                    handleRequestClose();
+                                    return;
+                                }
+                                if (raw === "rampkit:show-paywall") {
+                                    try {
+                                        (_d = props.onShowPaywall) === null || _d === void 0 ? void 0 : _d.call(props);
                                     }
                                     catch (_) { }
-                                    props.onRequestClose();
                                     return;
                                 }
                                 if (raw === "rampkit:goBack") {
@@ -638,7 +692,7 @@ function Overlay(props) {
                                         navigateToIndex(i - 1);
                                     }
                                     else {
-                                        props.onRequestClose();
+                                        handleRequestClose();
                                     }
                                     return;
                                 }
@@ -649,7 +703,7 @@ function Overlay(props) {
                                             navigateToIndex(i - 1);
                                         }
                                         else {
-                                            props.onRequestClose();
+                                            handleRequestClose();
                                         }
                                         return;
                                     }
@@ -667,7 +721,7 @@ function Overlay(props) {
                                     return;
                                 }
                                 if (raw === "rampkit:close") {
-                                    props.onRequestClose();
+                                    handleRequestClose();
                                     return;
                                 }
                                 if (raw.startsWith("haptic:")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rampkit-expo-dev",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "The Expo SDK for RampKit. Build, test, and personalize app onboardings with instant updates.",
   "main": "build/index.js",
   "types": "build/index.d.ts",