flowboard-react 0.6.1 → 0.6.3

package/lib/typescript/src/native/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/native/svg.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,SAGxB,CAAC;AAMF,MAAM,CAAC,OAAO,UAAU,GAAG,CAAC,KAAK,EAAE,GAAG,2CAcrC;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,GAAG,2CAOhC;AAED,wBAAgB,CAAC,CAAC,KAAK,EAAE,GAAG,2CAO3B;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,GAAG,2CAO9B;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,GAAG,2CAOjC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,GAAG,2CAOjC"}

package/lib/typescript/src/native/vectorIcons.d.ts

@@ -0,0 +1,4 @@
+export declare const vectorIconsNativeAvailable: boolean;
+export declare function getFontAwesomeGlyphMap(): Record<string, number> | null;
+export declare function FontAwesome6(props: any): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=vectorIcons.d.ts.map

package/lib/typescript/src/native/vectorIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vectorIcons.d.ts","sourceRoot":"","sources":["../../../../src/native/vectorIcons.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,0BAA0B,SAGtC,CAAC;AAcF,wBAAgB,sBAAsB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAetE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,2CAMtC"}

package/lib/typescript/src/utils/flowboardUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flowboardUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/flowboardUtils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,MAAM,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAK1B,CAAC;AAIF,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAiD/D;AAgBD,wBAAgB,cAAc,CAC5B,KAAK,EAAE,GAAG,EACV,UAAU,UAAQ,GACjB,MAAM,GAAG,SAAS,CAepB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAuB9C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CAOA;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAOA;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,OAAa,GAAG,MAAM,CAiBrE;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,CAMR;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,GAAG,CAkDL;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,GAAG,IAAI,CAqBf;AAED,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CA4C5D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAWvD;AAED,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAYlD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAgBtD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAYvD;AAED,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAkBnD;AAED,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG;IAC9C,cAAc,EAAE,GAAG,CAAC;IACpB,UAAU,EAAE,GAAG,CAAC;CACjB,CAsBA"}
+{"version":3,"file":"flowboardUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/flowboardUtils.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,MAAM,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,MAK1B,CAAC;AAIF,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAiD/D;AAgBD,wBAAgB,cAAc,CAC5B,KAAK,EAAE,GAAG,EACV,UAAU,UAAQ,GACjB,MAAM,GAAG,SAAS,CAuBpB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAuB9C;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CAOA;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB,CAOA;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,OAAa,GAAG,MAAM,CAiBrE;AAED,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,CAMR;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,GAAG,CAkDL;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAC5B,MAAM,GAAG,IAAI,CAqBf;AAED,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CA4C5D;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAWvD;AAED,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAYlD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAgBtD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAYvD;AAED,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAkBnD;AAED,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG;IAC9C,cAAc,EAAE,GAAG,CAAC;IACpB,UAAU,EAAE,GAAG,CAAC;CACjB,CAsBA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowboard-react",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Onboard your users with one click",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -10,14 +10,17 @@
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./app.plugin.js": "./app.plugin.js",
     "./package.json": "./package.json"
   },
   "files": [
     "src",
     "lib",
+    "bin",
     "android",
     "ios",
     "cpp",
+    "app.plugin.js",
     "*.podspec",
     "react-native.config.js",
     "!ios/build",
@@ -32,8 +35,13 @@
     "!**/.*"
   ],
   "dependencies": {
-    "expr-eval": "^2.0.2",
-    "uuid": "^11.1.0"
+    "expr-eval": ">= 2.0.2 < 3",
+    "react-native-get-random-values": "1.11.0",
+    "react-native-mask-input": "1.2.3",
+    "uuid": ">= 8.3.2 < 12"
+  },
+  "bin": {
+    "flowboard-setup": "./bin/setup.js"
   },
   "scripts": {
     "example": "yarn workspace flowboard-react-example",
@@ -91,22 +99,19 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@react-native-async-storage/async-storage": "^1.24.0",
-    "@react-native-masked-view/masked-view": "^0.3.2",
-    "lottie-react-native": "^7.1.0",
-    "react": "*",
-    "react-native": "*",
-    "react-native-device-info": "^13.2.0",
-    "react-native-gesture-handler": "^2.30.0",
-    "react-native-get-random-values": "^1.11.0",
-    "react-native-in-app-review": "^4.3.0",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-mask-input": "^1.2.3",
-    "react-native-pager-view": "^6.2.4",
-    "react-native-permissions": "^4.1.5",
-    "react-native-safe-area-context": "^5.0.0",
-    "react-native-svg": "^15.10.1",
-    "react-native-vector-icons": "^10.2.0"
+    "@react-native-async-storage/async-storage": ">= 1.24.0",
+    "@react-native-masked-view/masked-view": ">= 0.3.2",
+    "lottie-react-native": ">= 7.1.0",
+    "react": ">= 18.2.0",
+    "react-native": ">= 0.71.0",
+    "react-native-device-info": ">= 13.2.0",
+    "react-native-in-app-review": ">= 4.3.0",
+    "react-native-linear-gradient": ">= 2.8.3",
+    "react-native-pager-view": ">= 6.2.4",
+    "react-native-permissions": ">= 4.1.5",
+    "react-native-safe-area-context": ">= 5.0.0",
+    "react-native-svg": ">= 15.10.1",
+    "react-native-vector-icons": ">= 10.2.0"
   },
   "workspaces": [
     "example"

package/src/Flowboard.ts

@@ -142,8 +142,7 @@ export class Flowboard {
       });
     } catch (error) {
       Flowboard.log(`Failed to load onboarding by id: ${String(error)}`);
-      Alert.alert('Failed to load onboarding', String(error));
-      return;
+      throw error;
     }
 
     await Flowboard.launchResolvedOnboarding(data, options);

package/src/FlowboardProvider.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, StyleSheet, View } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Flowboard, type LaunchPayload } from './Flowboard';
 import FlowboardFlow from './components/FlowboardFlow';
+import { SafeAreaProvider } from './native/safeAreaContext';
 
 const styles = StyleSheet.create({
   modalContainer: {

package/src/components/FlowboardFlow.tsx

@@ -1,19 +1,22 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Alert, Keyboard, Platform, StyleSheet, View } from 'react-native';
-import PagerView from 'react-native-pager-view';
 import { Linking } from 'react-native';
-import InAppReview from 'react-native-in-app-review';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {
   openSettings,
   PERMISSIONS,
   request,
   requestNotifications,
   RESULTS,
-} from 'react-native-permissions';
+} from '../native/permissions';
 import { AssetPreloader } from '../core/assetPreloader';
 import { AnalyticsManager, OnboardingOutcome } from '../core/analyticsManager';
 import { OnboardingRepository } from '../core/onboardingRepository';
+import {
+  requestInAppReview,
+  isInAppReviewAvailable,
+} from '../native/inAppReview';
+import PagerView, { type PagerViewHandle } from '../native/pagerView';
+import { SafeAreaProvider } from '../native/safeAreaContext';
 import FlowboardRenderer from './FlowboardRenderer';
 import {
   SliderRegistry,
@@ -27,9 +30,10 @@ import type {
   OnboardingEndCallback,
   OnStepChangeCallback,
 } from '../types/flowboard';
+import { parseColor } from '../utils/flowboardUtils';
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#ffffff' },
+  container: { flex: 1 },
   fullFlex: { flex: 1 },
 });
 
@@ -61,7 +65,7 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
   const repository = useMemo(() => new OnboardingRepository(), []);
   const assetPreloader = useMemo(() => new AssetPreloader(), []);
   const sliderRegistry = useMemo(() => new SliderRegistry(), []);
-  const pagerRef = useRef<PagerView>(null);
+  const pagerRef = useRef<PagerViewHandle | null>(null);
   const [currentIndex, setCurrentIndex] = useState(() =>
     resolveInitialPage(initialStep, screens.length)
   );
@@ -77,6 +81,9 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
   const didSyncPagerRef = useRef(false);
   const completedRef = useRef(false);
   const flowStartTimeRef = useRef(Date.now());
+  const currentScreenData =
+    (screens[currentIndex] as Record<string, any> | undefined) ?? null;
+  const flowBackgroundColor = resolveScreenBackgroundColor(currentScreenData);
 
   useEffect(() => {
     AnalyticsManager.instance.startSession({ flowData: data });
@@ -323,8 +330,8 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
 
   const handleRateAppAction = async (index: number, totalScreens: number) => {
     try {
-      if (InAppReview.isAvailable()) {
-        InAppReview.RequestInAppReview();
+      if (isInAppReviewAvailable()) {
+        await requestInAppReview();
       }
     } catch {
       // ignore
@@ -406,7 +413,14 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
 
   return (
     <SafeAreaProvider>
-      <View style={styles.container}>
+      <View
+        style={[
+          styles.container,
+          flowBackgroundColor
+            ? { backgroundColor: flowBackgroundColor }
+            : undefined,
+        ]}
+      >
         <PagerView
           ref={pagerRef}
           style={styles.fullFlex}
@@ -461,6 +475,30 @@ function resolveInitialPage(desired: number, total: number): number {
   return desired;
 }
 
+function resolveScreenBackgroundColor(
+  screenData: Record<string, any> | null
+): string | undefined {
+  if (!screenData) return undefined;
+
+  const bgData = screenData.background;
+  if (bgData && typeof bgData === 'object') {
+    const type = String(bgData.type ?? '').toLowerCase();
+    if (type === 'color' && bgData.color !== undefined) {
+      return parseColor(bgData.color);
+    }
+    if (type === 'gradient' && Array.isArray(bgData.colors)) {
+      const first = bgData.colors[0];
+      if (first !== undefined) return parseColor(first);
+    }
+  }
+
+  if (screenData.backgroundColor !== undefined) {
+    return parseColor(screenData.backgroundColor);
+  }
+
+  return undefined;
+}
+
 function validateScreen(
   screenData: Record<string, any>,
   formData: Record<string, any>