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

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 {