@umituz/react-native-design-system 4.25.100 → 4.25.101

package/dist/onboarding/presentation/components/OnboardingBackground.d.ts

@@ -17,6 +17,7 @@ export interface OnboardingBackgroundProps {
     useCustomBackground: boolean;
     showOverlay: boolean;
     overlayOpacity: number;
+    backgroundColor?: string;
     /**
      * Optional video background component.
      * Required only when slides use `backgroundVideo`.

package/dist/onboarding/presentation/providers/OnboardingProvider.d.ts

@@ -14,6 +14,7 @@ export interface OnboardingTranslations {
 interface OnboardingProviderValue {
     theme: OnboardingTheme;
     translations: OnboardingTranslations;
+    backgroundColor?: string;
 }
 export interface OnboardingProviderProps {
     children: React.ReactNode;

package/dist/onboarding/presentation/types/OnboardingTheme.d.ts

@@ -18,6 +18,7 @@ export interface OnboardingColors {
     iconBorder: string;
     errorColor: string;
     featureItemBg: string;
+    background?: string;
 }
 export interface OnboardingTheme {
     colors: OnboardingColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.100",
+  "version": "4.25.101",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/onboarding/hooks/useOnboardingFlow.ts

@@ -17,14 +17,32 @@ export interface UseOnboardingFlowResult {
 export const useOnboardingFlow = (): UseOnboardingFlowResult => {
   const [isOnboardingComplete, setIsOnboardingComplete] = useState(false);
 
+  if (__DEV__) {
+    console.log("[useOnboardingFlow] Hook initialized, isOnboardingComplete:", isOnboardingComplete);
+  }
+
   // Load persisted state
   useEffect(() => {
     const isMounted = { current: true };
 
+    if (__DEV__) {
+      console.log("[useOnboardingFlow] useEffect - Loading persisted state");
+    }
+
     const loadPersistedState = async () => {
+      if (__DEV__) {
+        console.log("[useOnboardingFlow] Reading from AsyncStorage:", ONBOARDING_KEY);
+      }
       const value = await AsyncStorage.getItem(ONBOARDING_KEY);
+      if (__DEV__) {
+        console.log("[useOnboardingFlow] AsyncStorage value:", value);
+      }
       if (isMounted.current) {
-        setIsOnboardingComplete(value === 'true');
+        const complete = value === 'true';
+        if (__DEV__) {
+          console.log("[useOnboardingFlow] Setting isOnboardingComplete to:", complete);
+        }
+        setIsOnboardingComplete(complete);
       }
     };
 
@@ -33,6 +51,9 @@ export const useOnboardingFlow = (): UseOnboardingFlowResult => {
     const subscription = DeviceEventEmitter.addListener(
       'onboarding-complete',
       () => {
+        if (__DEV__) {
+          console.log("[useOnboardingFlow] DeviceEventEmitter - onboarding-complete event");
+        }
         if (isMounted.current) {
           setIsOnboardingComplete(true);
           AsyncStorage.setItem(ONBOARDING_KEY, 'true');
@@ -41,15 +62,24 @@ export const useOnboardingFlow = (): UseOnboardingFlowResult => {
     );
 
     return () => {
+      if (__DEV__) {
+        console.log("[useOnboardingFlow] Cleanup - removing event listener");
+      }
       isMounted.current = false;
       subscription.remove();
     };
   }, []);
 
   const completeOnboarding = useCallback(async () => {
+    if (__DEV__) {
+      console.log("[useOnboardingFlow] completeOnboarding called");
+    }
     await AsyncStorage.setItem(ONBOARDING_KEY, 'true');
     setIsOnboardingComplete(true);
     DeviceEventEmitter.emit('onboarding-complete');
+    if (__DEV__) {
+      console.log("[useOnboardingFlow] Onboarding marked as complete");
+    }
   }, []);
 
   return {

package/src/onboarding/presentation/components/OnboardingBackground.tsx

@@ -85,6 +85,7 @@ export interface OnboardingBackgroundProps {
   useCustomBackground: boolean;
   showOverlay: boolean;
   overlayOpacity: number;
+  backgroundColor?: string; // Optional background color
   /**
    * Optional video background component.
    * Required only when slides use `backgroundVideo`.
@@ -102,10 +103,31 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
   useCustomBackground,
   showOverlay,
   overlayOpacity,
+  backgroundColor,
   VideoComponent,
 }) => {
   if (!currentSlide) return null;
 
+  // If backgroundColor is provided, show ONLY solid color (no images/videos)
+  if (backgroundColor) {
+    if (__DEV__) {
+      console.log("[OnboardingBackground] Using solid backgroundColor:", backgroundColor);
+    }
+    return (
+      <View style={StyleSheet.absoluteFill} pointerEvents="none">
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor }
+          ]}
+        />
+      </View>
+    );
+  }
+
+  // Otherwise show images/videos with optional overlay
+  const shouldShowOverlay = showOverlay;
+
   return (
     <View style={StyleSheet.absoluteFill} pointerEvents="none">
       <BackgroundContent
@@ -118,7 +140,7 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
         style={[
           StyleSheet.absoluteFill,
           {
-            backgroundColor: showOverlay
+            backgroundColor: shouldShowOverlay
               ? `rgba(0,0,0,${overlayOpacity})`
               : "transparent",
           },

package/src/onboarding/presentation/components/OnboardingScreenContent.tsx

@@ -12,6 +12,7 @@ import { QuestionSlide } from "./QuestionSlide";
 import { OnboardingFooter } from "./OnboardingFooter";
 import { OnboardingBackground } from "./OnboardingBackground";
 import { useOnboardingGestures } from "../hooks/useOnboardingGestures";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
 
 export const OnboardingScreenContent = ({
@@ -45,6 +46,7 @@ export const OnboardingScreenContent = ({
   VideoComponent,
 }: OnboardingScreenContentProps) => {
   const { themeMode } = useTheme();
+  const { backgroundColor } = useOnboardingProvider();
 
   const panResponder = useOnboardingGestures({
     isFirstSlide,
@@ -78,6 +80,7 @@ export const OnboardingScreenContent = ({
         useCustomBackground={useCustomBackground}
         showOverlay={showOverlay}
         overlayOpacity={overlayOpacity}
+        backgroundColor={backgroundColor}
         VideoComponent={VideoComponent}
       />
 

package/src/onboarding/presentation/providers/OnboardingProvider.tsx

@@ -17,6 +17,7 @@ export interface OnboardingTranslations {
 interface OnboardingProviderValue {
   theme: OnboardingTheme;
   translations: OnboardingTranslations;
+  backgroundColor?: string;
 }
 
 const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undefined);
@@ -41,6 +42,7 @@ export const OnboardingProvider = ({
         useCustomBackground,
       },
       translations,
+      backgroundColor: colors.background,
     }),
     [colors, useCustomBackground, translations]
   );

package/src/onboarding/presentation/screens/OnboardingScreen.tsx

@@ -102,6 +102,15 @@ export const OnboardingScreen = ({
   VideoComponent,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
+    console.log("[OnboardingScreen] Component rendering");
+    console.log("[OnboardingScreen] Props:", {
+      slidesCount: slides?.length || 0,
+      storageKey,
+      showSkipButton,
+      showBackButton,
+      showProgressBar,
+      translationsProvided: !!translations,
+    });
   }
 
   const tokens = useAppDesignTokens();
@@ -158,10 +167,15 @@ export const OnboardingScreen = ({
   // Early return if no slides - prevents rendering empty/broken screen
   if (filteredSlides.length === 0) {
     if (__DEV__) {
+      console.warn("[OnboardingScreen] No slides to display - filteredSlides is empty");
     }
     return null;
   }
 
+  if (__DEV__) {
+    console.log("[OnboardingScreen] Rendering with", filteredSlides.length, "slides");
+  }
+
   return (
     <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors} translations={translations}>
       <OnboardingScreenContent

package/src/onboarding/presentation/types/OnboardingTheme.ts

@@ -19,6 +19,7 @@ export interface OnboardingColors {
   iconBorder: string;
   errorColor: string;
   featureItemBg: string;
+  background?: string; // Optional background color
 }
 
 export interface OnboardingTheme {