flowboard-react 0.6.0 → 0.6.2

package/src/components/FlowboardFlow.tsx

@@ -27,9 +27,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 },
 });
 
@@ -77,6 +78,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 });
@@ -406,7 +410,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 +472,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>