flowboard-react 0.6.8 → 0.6.12

package/lib/typescript/src/fonts/googleFontsLoader.d.ts

@@ -0,0 +1,18 @@
+export type GoogleFontLoadRequest = {
+    family: string;
+    weight: number;
+    nativeFontName: string;
+    cacheKey: string;
+};
+export type GoogleFontProvider = {
+    loadFont: (request: GoogleFontLoadRequest) => Promise<boolean | string | void> | boolean | string | void;
+};
+export declare function resolveGoogleFontWeight(family: string, weight?: number | string): number;
+export declare function resolveGoogleFontNativeName(family: string, weight?: number | string): string;
+export declare function ensureGoogleFontLoaded(family: string, weight?: number | string): Promise<void>;
+export declare function isGoogleFontLoaded(family: string, weight?: number | string): boolean;
+export declare function getLoadedGoogleFontNativeName(family: string, weight?: number | string): string | undefined;
+export declare function registerGoogleFontProvider(provider: GoogleFontProvider | null): void;
+export declare function subscribeGoogleFontLoad(listener: () => void): () => void;
+export declare function __resetGoogleFontsLoaderForTests(): void;
+//# sourceMappingURL=googleFontsLoader.d.ts.map

package/lib/typescript/src/fonts/googleFontsLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleFontsLoader.d.ts","sourceRoot":"","sources":["../../../../src/fonts/googleFontsLoader.ts"],"names":[],"mappings":"AAYA,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,CACR,OAAO,EAAE,qBAAqB,KAC3B,OAAO,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;CACjE,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GACvB,MAAM,CAWR;AAED,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GACvB,MAAM,CASR;AAED,wBAAsB,sBAAsB,CAC1C,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GACvB,OAAO,CAAC,IAAI,CAAC,CASf;AAED,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GACvB,OAAO,CAST;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GACvB,MAAM,GAAG,SAAS,CASpB;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,GAClC,IAAI,CAgBN;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAExE;AAED,wBAAgB,gCAAgC,IAAI,IAAI,CAEvD"}

package/lib/typescript/src/index.d.ts

@@ -1,6 +1,8 @@
 export { Flowboard } from './Flowboard';
 export { default as FlowboardProvider } from './FlowboardProvider';
 export { default as FlowboardFlow } from './components/FlowboardFlow';
+export { ensureGoogleFontLoaded, registerFontResolver, resolveFontFamily, } from './fonts/googleFontLoader';
+export { ensureGoogleFontLoaded as ensureGoogleNativeFontLoaded, getLoadedGoogleFontNativeName, isGoogleFontLoaded as isGoogleNativeFontLoaded, registerGoogleFontProvider, resolveGoogleFontNativeName, resolveGoogleFontWeight, } from './fonts/googleFontsLoader';
 export type { FlowboardContext, CustomScreenBuilder, CustomActionBuilder, OnboardingEndCallback, OnStepChangeCallback, FlowboardLaunchOptions, FlowboardLaunchByIdOptions, FlowboardFlowVersion, FlowboardData, } from './types/flowboard';
 export type { FlowboardFlowProps } from './components/FlowboardFlow';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,sBAAsB,IAAI,4BAA4B,EACtD,6BAA6B,EAC7B,kBAAkB,IAAI,wBAAwB,EAC9C,0BAA0B,EAC1B,2BAA2B,EAC3B,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAAoB,EACpB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowboard-react",
-  "version": "0.6.8",
+  "version": "0.6.12",
   "description": "Onboard your users with one click",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -99,20 +99,32 @@
     "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-native-async-storage/async-storage": "*",
+    "@react-native-masked-view/masked-view": "*",
+    "expo-font": "*",
+    "lottie-react-native": "*",
     "react": ">= 18.2.0",
     "react-native": ">= 0.71.0",
-    "react-native-device-info": ">= 13.2.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-pager-view": ">= 6.2.3",
-    "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-device-info": "*",
+    "react-native-dynamic-fonts": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-get-random-values": "*",
+    "react-native-in-app-review": "*",
+    "react-native-linear-gradient": "*",
+    "react-native-mask-input": "*",
+    "react-native-pager-view": "*",
+    "react-native-permissions": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": "*",
+    "react-native-vector-icons": "*"
+  },
+  "peerDependenciesMeta": {
+    "expo-font": {
+      "optional": true
+    },
+    "react-native-dynamic-fonts": {
+      "optional": true
+    }
   },
   "workspaces": [
     "example"

package/src/components/FlowboardFlow.tsx

@@ -15,7 +15,6 @@ import {
   requestInAppReview,
   isInAppReviewAvailable,
 } from '../native/inAppReview';
-import PagerView, { type PagerViewHandle } from '../native/pagerView';
 import { SafeAreaProvider } from '../native/safeAreaContext';
 import FlowboardRenderer from './FlowboardRenderer';
 import {
@@ -35,7 +34,6 @@ import { parseColor } from '../utils/flowboardUtils';
 const styles = StyleSheet.create({
   container: { flex: 1 },
   fullFlex: { flex: 1 },
-  pagerPage: { width: '100%', height: '100%' },
 });
 
 export type FlowboardFlowProps = {
@@ -66,20 +64,15 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
   const repository = useMemo(() => new OnboardingRepository(), []);
   const assetPreloader = useMemo(() => new AssetPreloader(), []);
   const sliderRegistry = useMemo(() => new SliderRegistry(), []);
-  const pagerRef = useRef<PagerViewHandle | null>(null);
   const [currentIndex, setCurrentIndex] = useState(() =>
     resolveInitialPage(initialStep, screens.length)
   );
-  const [activePages, setActivePages] = useState<Record<number, true>>(() => ({
-    [resolveInitialPage(initialStep, screens.length)]: true,
-  }));
   const [formData, setFormData] = useState<Record<string, any>>({
     ...initialFormData,
   });
   const formDataRef = useRef<Record<string, any>>({
     ...initialFormData,
   });
-  const didSyncPagerRef = useRef(false);
   const completedRef = useRef(false);
   const flowStartTimeRef = useRef(Date.now());
   const currentScreenData =
@@ -104,23 +97,6 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (!pagerRef.current) return;
-
-    const frameId = requestAnimationFrame(() => {
-      if (!pagerRef.current) return;
-
-      if (!didSyncPagerRef.current) {
-        pagerRef.current.setPageWithoutAnimation(currentIndex);
-        didSyncPagerRef.current = true;
-      } else {
-        pagerRef.current.setPage(currentIndex);
-      }
-    });
-
-    return () => cancelAnimationFrame(frameId);
-  }, [currentIndex]);
-
   const notifyStepChange = (index: number, preloadNext = true) => {
     if (index < 0 || index >= screens.length) return;
     const screenData = screens[index] as Record<string, any>;
@@ -142,16 +118,8 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
     }
   };
 
-  const markPageAsActive = (index: number) => {
-    setActivePages((prev) => {
-      if (prev[index]) return prev;
-      return { ...prev, [index]: true };
-    });
-  };
-
   const moveToIndex = (nextIndex: number) => {
     if (nextIndex < 0 || nextIndex >= screens.length) return;
-    markPageAsActive(nextIndex);
     setCurrentIndex(nextIndex);
     notifyStepChange(nextIndex);
   };
@@ -418,6 +386,36 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
     persistProgress(index, next);
   };
 
+  const renderCurrentScreen = () => {
+    const screen = screens[currentIndex];
+    if (!screen || typeof screen !== 'object') return null;
+
+    const screenData = screen as Record<string, any>;
+    const screenType = screenData.type;
+
+    if (screenType === 'custom' && customScreenBuilder) {
+      const ctx = createContext(currentIndex);
+      return customScreenBuilder(ctx);
+    }
+
+    return (
+      <SliderRegistryProvider registry={sliderRegistry}>
+        <FlowboardRenderer
+          screenData={screenData}
+          formData={formData}
+          onInputChange={(id, value) =>
+            handleInputChange(id, value, currentIndex)
+          }
+          onAction={(action, payload) =>
+            handleAction(action, currentIndex, screens.length, payload)
+          }
+          currentIndex={currentIndex}
+          totalScreens={screens.length}
+        />
+      </SliderRegistryProvider>
+    );
+  };
+
   return (
     <SafeAreaProvider>
       <View
@@ -428,56 +426,9 @@ export default function FlowboardFlow(props: FlowboardFlowProps) {
             : undefined,
         ]}
       >
-        <PagerView
-          ref={pagerRef}
-          style={styles.fullFlex}
-          scrollEnabled={false}
-          initialPage={currentIndex}
-        >
-          {screens.map((screen, index) => {
-            const screenData = screen as Record<string, any>;
-            const screenType = screenData.type;
-            const isActivePage = activePages[index] === true;
-
-            if (screenType === 'custom' && customScreenBuilder) {
-              const ctx = createContext(index);
-              return (
-                <View
-                  key={`screen-${index}`}
-                  collapsable={false}
-                  style={styles.pagerPage}
-                >
-                  {isActivePage ? customScreenBuilder(ctx) : null}
-                </View>
-              );
-            }
-
-            return (
-              <View
-                key={`screen-${index}`}
-                collapsable={false}
-                style={styles.pagerPage}
-              >
-                {isActivePage ? (
-                  <SliderRegistryProvider registry={sliderRegistry}>
-                    <FlowboardRenderer
-                      screenData={screenData}
-                      formData={formData}
-                      onInputChange={(id, value) =>
-                        handleInputChange(id, value, index)
-                      }
-                      onAction={(action, payload) =>
-                        handleAction(action, index, screens.length, payload)
-                      }
-                      currentIndex={currentIndex}
-                      totalScreens={screens.length}
-                    />
-                  </SliderRegistryProvider>
-                ) : null}
-              </View>
-            );
-          })}
-        </PagerView>
+        <View key={`screen-${currentIndex}`} style={styles.fullFlex}>
+          {renderCurrentScreen()}
+        </View>
       </View>
     </SafeAreaProvider>
   );