flowboard-react 0.6.2 → 0.6.3

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,
@@ -62,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)
   );
@@ -327,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

package/src/components/FlowboardRenderer.tsx

@@ -14,21 +14,16 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import MaskedView from '@react-native-masked-view/masked-view';
-import LinearGradient from 'react-native-linear-gradient';
-import LottieView from 'lottie-react-native';
 import MaskInput from 'react-native-mask-input';
-import Svg, {
-  Circle,
-  G,
-  Line,
-  Polygon,
-  Text as SvgText,
-} from 'react-native-svg';
+import LinearGradient from '../native/linearGradient';
+import LottieView from '../native/lottie';
+import MaskedView from '../native/maskedView';
 import PagerView, {
+  type PagerViewHandle,
   type PagerViewOnPageSelectedEvent,
-} from 'react-native-pager-view';
+} from '../native/pagerView';
+import { useSafeAreaInsets } from '../native/safeAreaContext';
+import Svg, { Circle, G, Line, Polygon, SvgText } from '../native/svg';
 import {
   insetsToStyle,
   insetsToMarginStyle,
@@ -3950,7 +3945,7 @@ function SliderWidget({
   children: React.ReactNode[];
 }) {
   const registry = useSliderRegistry();
-  const pagerRef = React.useRef<PagerView>(null);
+  const pagerRef = React.useRef<PagerViewHandle | null>(null);
   const pageLength = children.length;
   const pageCount = pageLength;
   const [currentPage, setCurrentPage] = React.useState(0);

package/src/core/clientContext.ts

@@ -1,8 +1,8 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import DeviceInfo from 'react-native-device-info';
 import { Platform } from 'react-native';
 import { v4 as uuidv4 } from 'uuid';
 import 'react-native-get-random-values';
+import { FlowboardAsyncStorage } from '../native/asyncStorage';
+import { FlowboardDeviceInfo } from '../native/deviceInfo';
 
 export type ClientContextData = {
   appVersion: string;
@@ -44,16 +44,16 @@ export class ClientContext {
   static async create(): Promise<ClientContext> {
     const installId = await getOrCreateInstallId();
 
-    const appVersion = DeviceInfo.getVersion();
-    const buildNumber = DeviceInfo.getBuildNumber();
-    const bundleId = DeviceInfo.getBundleId();
+    const appVersion = FlowboardDeviceInfo.getVersion();
+    const buildNumber = FlowboardDeviceInfo.getBuildNumber();
+    const bundleId = FlowboardDeviceInfo.getBundleId();
 
-    const locale = await getDeviceLocale();
+    const locale = await FlowboardDeviceInfo.getDeviceLocale();
     const country = locale.includes('_') ? locale.split('_').pop() ?? '' : '';
 
     const os = Platform.OS;
-    const osVersion = DeviceInfo.getSystemVersion();
-    const deviceType = mapDeviceType(await DeviceInfo.getDeviceType());
+    const osVersion = FlowboardDeviceInfo.getSystemVersion();
+    const deviceType = mapDeviceType(await FlowboardDeviceInfo.getDeviceType());
 
     return new ClientContext({
       appVersion,
@@ -87,35 +87,13 @@ export class ClientContext {
 }
 
 async function getOrCreateInstallId(): Promise<string> {
-  const stored = await AsyncStorage.getItem(INSTALL_ID_KEY);
+  const stored = await FlowboardAsyncStorage.getItem(INSTALL_ID_KEY);
   if (stored) return stored;
   const installId = uuidv4();
-  await AsyncStorage.setItem(INSTALL_ID_KEY, installId);
+  await FlowboardAsyncStorage.setItem(INSTALL_ID_KEY, installId);
   return installId;
 }
 
-async function getDeviceLocale(): Promise<string> {
-  const deviceInfoAny = DeviceInfo as any;
-  if (typeof deviceInfoAny.getDeviceLocale === 'function') {
-    const locale = await deviceInfoAny.getDeviceLocale();
-    if (locale) return locale;
-  }
-  if (typeof deviceInfoAny.getDeviceLocales === 'function') {
-    const locales = await deviceInfoAny.getDeviceLocales();
-    if (Array.isArray(locales) && locales.length > 0) {
-      const first = locales[0];
-      if (typeof first === 'string') return first;
-      if (first?.languageTag) return first.languageTag;
-      if (first?.languageCode) {
-        return first.countryCode
-          ? `${first.languageCode}_${first.countryCode}`
-          : first.languageCode;
-      }
-    }
-  }
-  return 'en_US';
-}
-
 function mapDeviceType(deviceType: string): string {
   switch (deviceType?.toLowerCase()) {
     case 'handset':

package/src/core/fontAwesome.ts

@@ -1,4 +1,4 @@
-import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
+import { FontAwesome6, getFontAwesomeGlyphMap } from '../native/vectorIcons';
 
 const hexRegex = /^(0x)?[a-fA-F0-9]{4,5}$/;
 
@@ -50,14 +50,7 @@ export function resolveFontAwesomeIcon(
 }
 
 function getGlyphMap(): Record<string, number> | null {
-  const anyIcon = FontAwesome6 as any;
-  if (typeof anyIcon.getRawGlyphMap === 'function') {
-    return anyIcon.getRawGlyphMap();
-  }
-  if (anyIcon.glyphMap) {
-    return anyIcon.glyphMap as Record<string, number>;
-  }
-  return null;
+  return getFontAwesomeGlyphMap();
 }
 
 function styleProps(style: string): Record<string, any> {

package/src/core/onboardingRepository.ts

@@ -1,5 +1,5 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import type { FlowboardData } from '../types/flowboard';
+import { FlowboardAsyncStorage } from '../native/asyncStorage';
 
 const STORAGE_KEY = 'flowboard_onboarding_json';
 const FETCH_TIME_KEY = 'flowboard_fetch_time';
@@ -9,12 +9,12 @@ const PROGRESS_FORM_DATA_KEY = 'flowboard_progress_form_data';
 
 export class OnboardingRepository {
   async saveOnboardingJson(json: FlowboardData): Promise<void> {
-    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(json));
-    await AsyncStorage.setItem(FETCH_TIME_KEY, Date.now().toString());
+    await FlowboardAsyncStorage.setItem(STORAGE_KEY, JSON.stringify(json));
+    await FlowboardAsyncStorage.setItem(FETCH_TIME_KEY, Date.now().toString());
   }
 
   async getOnboardingJson(): Promise<FlowboardData | null> {
-    const jsonString = await AsyncStorage.getItem(STORAGE_KEY);
+    const jsonString = await FlowboardAsyncStorage.getItem(STORAGE_KEY);
     if (!jsonString) return null;
     try {
       return JSON.parse(jsonString) as FlowboardData;
@@ -25,7 +25,7 @@ export class OnboardingRepository {
   }
 
   async clearOnboardingJson(): Promise<void> {
-    await AsyncStorage.multiRemove([STORAGE_KEY, FETCH_TIME_KEY]);
+    await FlowboardAsyncStorage.multiRemove([STORAGE_KEY, FETCH_TIME_KEY]);
   }
 
   async saveProgress(params: {
@@ -33,18 +33,21 @@ export class OnboardingRepository {
     stepIndex: number;
     formData: Record<string, any>;
   }): Promise<void> {
-    await AsyncStorage.setItem(PROGRESS_FLOW_KEY, params.flowId);
-    await AsyncStorage.setItem(PROGRESS_STEP_KEY, params.stepIndex.toString());
-    await AsyncStorage.setItem(
+    await FlowboardAsyncStorage.setItem(PROGRESS_FLOW_KEY, params.flowId);
+    await FlowboardAsyncStorage.setItem(
+      PROGRESS_STEP_KEY,
+      params.stepIndex.toString()
+    );
+    await FlowboardAsyncStorage.setItem(
       PROGRESS_FORM_DATA_KEY,
       JSON.stringify(params.formData)
     );
   }
 
   async getProgressStepForFlow(flowId: string): Promise<number | null> {
-    const storedFlowId = await AsyncStorage.getItem(PROGRESS_FLOW_KEY);
+    const storedFlowId = await FlowboardAsyncStorage.getItem(PROGRESS_FLOW_KEY);
     if (storedFlowId !== flowId) return null;
-    const value = await AsyncStorage.getItem(PROGRESS_STEP_KEY);
+    const value = await FlowboardAsyncStorage.getItem(PROGRESS_STEP_KEY);
     if (!value) return null;
     const parsed = Number(value);
     return Number.isNaN(parsed) ? null : parsed;
@@ -53,9 +56,11 @@ export class OnboardingRepository {
   async getProgressFormDataForFlow(
     flowId: string
   ): Promise<Record<string, any> | null> {
-    const storedFlowId = await AsyncStorage.getItem(PROGRESS_FLOW_KEY);
+    const storedFlowId = await FlowboardAsyncStorage.getItem(PROGRESS_FLOW_KEY);
     if (storedFlowId !== flowId) return null;
-    const jsonString = await AsyncStorage.getItem(PROGRESS_FORM_DATA_KEY);
+    const jsonString = await FlowboardAsyncStorage.getItem(
+      PROGRESS_FORM_DATA_KEY
+    );
     if (!jsonString) return null;
     try {
       const decoded = JSON.parse(jsonString);
@@ -70,7 +75,7 @@ export class OnboardingRepository {
   }
 
   async clearProgress(): Promise<void> {
-    await AsyncStorage.multiRemove([
+    await FlowboardAsyncStorage.multiRemove([
       PROGRESS_FLOW_KEY,
       PROGRESS_STEP_KEY,
       PROGRESS_FORM_DATA_KEY,

package/src/native/asyncStorage.ts

@@ -0,0 +1,99 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { hasNativeModule, safeAsync } from './runtime';
+
+const memoryStore = new Map<string, string>();
+
+const warning =
+  'AsyncStorage is unavailable. Flowboard will fall back to in-memory storage until native setup is fixed.';
+
+export const asyncStorageAvailable = hasNativeModule(
+  'RNCAsyncStorage',
+  'RNC_AsyncSQLiteDBStorage',
+  'AsyncSQLiteDBStorage',
+  'AsyncLocalStorage',
+  'PlatformLocalStorage'
+);
+
+function getMemoryValue(key: string): string | null {
+  return memoryStore.has(key) ? memoryStore.get(key) ?? null : null;
+}
+
+async function getItem(key: string): Promise<string | null> {
+  const fallback = getMemoryValue(key);
+  return safeAsync(
+    'native-async-storage-get',
+    asyncStorageAvailable,
+    async () => {
+      const value = await AsyncStorage.getItem(key);
+      if (typeof value === 'string') {
+        memoryStore.set(key, value);
+      }
+      return value ?? fallback;
+    },
+    fallback,
+    warning
+  );
+}
+
+async function setItem(key: string, value: string): Promise<void> {
+  memoryStore.set(key, value);
+  await safeAsync(
+    'native-async-storage-set',
+    asyncStorageAvailable,
+    async () => {
+      await AsyncStorage.setItem(key, value);
+    },
+    undefined,
+    warning
+  );
+}
+
+async function removeItem(key: string): Promise<void> {
+  memoryStore.delete(key);
+  await safeAsync(
+    'native-async-storage-remove',
+    asyncStorageAvailable,
+    async () => {
+      await AsyncStorage.removeItem(key);
+    },
+    undefined,
+    warning
+  );
+}
+
+async function multiRemove(keys: string[]): Promise<void> {
+  keys.forEach((key) => memoryStore.delete(key));
+  await safeAsync(
+    'native-async-storage-multi-remove',
+    asyncStorageAvailable,
+    async () => {
+      await AsyncStorage.multiRemove(keys);
+    },
+    undefined,
+    warning
+  );
+}
+
+async function clear(): Promise<void> {
+  memoryStore.clear();
+  await safeAsync(
+    'native-async-storage-clear',
+    asyncStorageAvailable,
+    async () => {
+      if (typeof (AsyncStorage as any).clear === 'function') {
+        await (AsyncStorage as any).clear();
+      }
+    },
+    undefined,
+    warning
+  );
+}
+
+export const FlowboardAsyncStorage = {
+  available: asyncStorageAvailable,
+  clear,
+  getItem,
+  multiRemove,
+  removeItem,
+  setItem,
+};

package/src/native/deviceInfo.ts

@@ -0,0 +1,88 @@
+import DeviceInfo from 'react-native-device-info';
+import { hasNativeModule, safeAsync, safeSync } from './runtime';
+
+const warning =
+  'react-native-device-info is unavailable. Flowboard will use generic device metadata until native setup is fixed.';
+const nativeDeviceInfo = DeviceInfo as any;
+
+export const deviceInfoAvailable = hasNativeModule('RNDeviceInfo');
+
+export const FlowboardDeviceInfo = {
+  available: deviceInfoAvailable,
+  getBuildNumber(): string {
+    return safeSync(
+      'native-device-info-build-number',
+      deviceInfoAvailable,
+      () => String(nativeDeviceInfo.getBuildNumber?.() ?? '1'),
+      '1',
+      warning
+    );
+  },
+  async getDeviceLocale(): Promise<string> {
+    return safeAsync(
+      'native-device-info-locale',
+      deviceInfoAvailable,
+      async () => {
+        if (typeof nativeDeviceInfo.getDeviceLocale === 'function') {
+          const locale = await nativeDeviceInfo.getDeviceLocale();
+          if (locale) return String(locale);
+        }
+
+        if (typeof nativeDeviceInfo.getDeviceLocales === 'function') {
+          const locales = await nativeDeviceInfo.getDeviceLocales();
+          if (Array.isArray(locales) && locales.length > 0) {
+            const first = locales[0];
+            if (typeof first === 'string') return first;
+            if (first?.languageTag) return String(first.languageTag);
+            if (first?.languageCode) {
+              return first.countryCode
+                ? `${first.languageCode}_${first.countryCode}`
+                : String(first.languageCode);
+            }
+          }
+        }
+
+        return 'en_US';
+      },
+      'en_US',
+      warning
+    );
+  },
+  async getDeviceType(): Promise<string> {
+    return safeAsync(
+      'native-device-info-device-type',
+      deviceInfoAvailable,
+      async () =>
+        String((await nativeDeviceInfo.getDeviceType?.()) ?? 'Handset'),
+      'Handset',
+      warning
+    );
+  },
+  getBundleId(): string {
+    return safeSync(
+      'native-device-info-bundle-id',
+      deviceInfoAvailable,
+      () => String(nativeDeviceInfo.getBundleId?.() ?? 'unknown.bundle'),
+      'unknown.bundle',
+      warning
+    );
+  },
+  getSystemVersion(): string {
+    return safeSync(
+      'native-device-info-system-version',
+      deviceInfoAvailable,
+      () => String(nativeDeviceInfo.getSystemVersion?.() ?? '0'),
+      '0',
+      warning
+    );
+  },
+  getVersion(): string {
+    return safeSync(
+      'native-device-info-version',
+      deviceInfoAvailable,
+      () => String(nativeDeviceInfo.getVersion?.() ?? '0.0.0'),
+      '0.0.0',
+      warning
+    );
+  },
+};

package/src/native/inAppReview.ts

@@ -0,0 +1,34 @@
+import InAppReview from 'react-native-in-app-review';
+import { hasNativeModule, safeAsync, safeSync } from './runtime';
+
+const warning =
+  'react-native-in-app-review is unavailable. Flowboard will skip in-app review prompts until native setup is fixed.';
+const nativeInAppReview = InAppReview as any;
+
+export const inAppReviewAvailable = hasNativeModule(
+  'InAppReviewModule',
+  'RNInAppReviewIOS'
+);
+
+export function isInAppReviewAvailable(): boolean {
+  return safeSync(
+    'native-in-app-review-available',
+    inAppReviewAvailable,
+    () => Boolean(nativeInAppReview.isAvailable?.()),
+    false,
+    warning
+  );
+}
+
+export async function requestInAppReview(): Promise<boolean> {
+  return safeAsync(
+    'native-in-app-review-request',
+    inAppReviewAvailable,
+    async () => {
+      const result = nativeInAppReview.RequestInAppReview?.();
+      return typeof result === 'boolean' ? result : Boolean(await result);
+    },
+    false,
+    warning
+  );
+}

package/src/native/linearGradient.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native';
+import NativeLinearGradient from 'react-native-linear-gradient';
+import { hasViewManager, warnOnce } from './runtime';
+
+const warning =
+  'react-native-linear-gradient is unavailable. Flowboard will fall back to solid backgrounds until native setup is fixed.';
+
+export const linearGradientAvailable = hasViewManager('BVLinearGradient');
+
+export default function LinearGradient(props: any) {
+  if (!linearGradientAvailable) {
+    warnOnce('native-linear-gradient', warning);
+    const { children, colors, style } = props;
+    const backgroundColor =
+      Array.isArray(colors) && colors.length > 0 ? colors[0] : undefined;
+    return (
+      <View style={[style, backgroundColor ? { backgroundColor } : null]}>
+        {children}
+      </View>
+    );
+  }
+
+  return <NativeLinearGradient {...props} />;
+}

package/src/native/lottie.tsx

@@ -0,0 +1,17 @@
+import { View } from 'react-native';
+import NativeLottieView from 'lottie-react-native';
+import { hasViewManager, warnOnce } from './runtime';
+
+const warning =
+  'lottie-react-native is unavailable. Flowboard will reserve space for animations but skip playback until native setup is fixed.';
+
+export const lottieAvailable = hasViewManager('LottieAnimationView');
+
+export default function LottieView(props: any) {
+  if (!lottieAvailable) {
+    warnOnce('native-lottie', warning);
+    return <View style={props.style} />;
+  }
+
+  return <NativeLottieView {...props} />;
+}

package/src/native/maskedView.tsx

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+import NativeMaskedView from '@react-native-masked-view/masked-view';
+import { hasViewManager, warnOnce } from './runtime';
+
+const warning =
+  '@react-native-masked-view/masked-view is unavailable. Flowboard will render masked content without the mask until native setup is fixed.';
+
+export const maskedViewAvailable = hasViewManager('RNCMaskedView');
+
+export default function MaskedView(props: any) {
+  if (!maskedViewAvailable) {
+    warnOnce('native-masked-view', warning);
+    const { children, ...viewProps } = props;
+    delete viewProps.maskElement;
+    return <View {...viewProps}>{children}</View>;
+  }
+
+  return <NativeMaskedView {...props} />;
+}

package/src/native/pagerView.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { View } from 'react-native';
+import NativePagerView from 'react-native-pager-view';
+import { hasViewManager, warnOnce } from './runtime';
+
+export type PagerViewHandle = {
+  setPage: (index: number) => void;
+  setPageWithoutAnimation: (index: number) => void;
+};
+
+export type PagerViewOnPageSelectedEvent = {
+  nativeEvent: {
+    position: number;
+  };
+};
+
+const warning =
+  'react-native-pager-view is unavailable. Flowboard will render one page at a time without native paging until setup is fixed.';
+
+export const pagerViewAvailable = hasViewManager('RNCViewPager');
+
+function clampPage(index: number, totalPages: number): number {
+  if (totalPages <= 0) return 0;
+  if (index < 0) return 0;
+  if (index >= totalPages) return totalPages - 1;
+  return index;
+}
+
+class PagerViewFallback extends React.Component<any, { page: number }> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      page: clampPage(
+        Number(props.initialPage ?? 0),
+        React.Children.count(props.children)
+      ),
+    };
+  }
+
+  componentDidUpdate(prevProps: any): void {
+    if (prevProps.initialPage !== this.props.initialPage) {
+      this.setPageWithoutAnimation(Number(this.props.initialPage ?? 0));
+      return;
+    }
+
+    const totalPages = React.Children.count(this.props.children);
+    const nextPage = clampPage(this.state.page, totalPages);
+    if (nextPage !== this.state.page) {
+      this.setState({ page: nextPage });
+    }
+  }
+
+  setPage = (index: number) => {
+    this.updatePage(index);
+  };
+
+  setPageWithoutAnimation = (index: number) => {
+    this.updatePage(index);
+  };
+
+  private updatePage(index: number): void {
+    warnOnce('native-pager-view', warning);
+    const totalPages = React.Children.count(this.props.children);
+    const nextPage = clampPage(index, totalPages);
+    if (nextPage === this.state.page) return;
+
+    this.setState({ page: nextPage });
+    this.props.onPageSelected?.({
+      nativeEvent: { position: nextPage },
+    });
+  }
+
+  render() {
+    const viewProps = { ...this.props } as Record<string, any>;
+    const { children, style } = viewProps;
+    delete viewProps.initialPage;
+    delete viewProps.onPageSelected;
+    delete viewProps.orientation;
+    delete viewProps.overdrag;
+    delete viewProps.pageMargin;
+
+    const pages = React.Children.toArray(children);
+    return (
+      <View {...viewProps} style={style}>
+        {pages[this.state.page] ?? null}
+      </View>
+    );
+  }
+}
+
+const PagerViewComponent = pagerViewAvailable
+  ? NativePagerView
+  : PagerViewFallback;
+
+export default PagerViewComponent as React.ComponentType<any>;