@umituz/react-native-onboarding 3.2.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -38,6 +38,8 @@
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@expo/vector-icons": ">=14.0.0",
+    "expo-av": "~15.0.0",
+    "expo-image": "~2.0.0",
     "expo-linear-gradient": "^15.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
@@ -53,6 +55,8 @@
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
     "@expo/vector-icons": ">=14.0.0",
+    "expo-av": "~15.0.0",
+    "expo-image": "~2.0.0",
     "expo-linear-gradient": "^15.0.7",
     "react": "^18.2.0",
     "react-native": "^0.74.0",

package/src/domain/entities/OnboardingSlide.ts

@@ -58,7 +58,25 @@ export interface OnboardingSlide {
   /**
    * Optional image URL (alternative to icon)
    */
-  image?: string;
+  image?: any;
+
+  /**
+   * Optional background image (URL or require path)
+   * Stretches to fill the screen behind content
+   */
+  backgroundImage?: any;
+
+  /**
+   * Optional background video (URL or require path)
+   * Plays in loop behind content
+   */
+  backgroundVideo?: any;
+
+  /**
+   * Opacity of the overlay gradient/color on top of background media
+   * Range: 0.0 to 1.0 (Default: 0.5)
+   */
+  overlayOpacity?: number;
 
   /**
    * Optional features list to display

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -6,6 +6,8 @@
 import React from "react";
 import { View, StyleSheet, StatusBar } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
+import { Image } from "expo-image";
+import { Video, ResizeMode } from "expo-av";
 import { useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { OnboardingHeader } from "./OnboardingHeader";
@@ -85,17 +87,74 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
 }) => {
   const { themeMode } = useTheme();
 
-  return (
-    <View style={[styles.container, containerStyle]}>
-      <StatusBar barStyle={themeMode === "dark" ? "light-content" : "dark-content"} />
-      {useGradient && currentSlide && (
+  const hasMedia = !!currentSlide?.backgroundImage || !!currentSlide?.backgroundVideo;
+  const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
+  // If media is present, valid gradient mode is enforced (white text)
+  const effectivelyUseGradient = useGradient || hasMedia;
+
+  const renderBackground = () => {
+    if (!currentSlide) return null;
+
+    if (currentSlide.backgroundVideo) {
+      return (
+        <View style={StyleSheet.absoluteFill}>
+          <Video
+            source={currentSlide.backgroundVideo}
+            style={StyleSheet.absoluteFill}
+            resizeMode={ResizeMode.COVER}
+            isLooping
+            shouldPlay
+            isMuted
+          />
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
+            ]}
+          />
+        </View>
+      );
+    }
+
+    if (currentSlide.backgroundImage) {
+      return (
+        <View style={StyleSheet.absoluteFill}>
+          <Image
+            source={currentSlide.backgroundImage}
+            style={StyleSheet.absoluteFill}
+            contentFit="cover"
+            transition={500}
+          />
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
+            ]}
+          />
+        </View>
+      );
+    }
+
+    if (useGradient && currentSlide.gradient) {
+      return (
         <LinearGradient
           colors={currentSlide.gradient as [string, string, ...string[]]}
           start={{ x: 0, y: 0 }}
           end={{ x: 1, y: 1 }}
           style={StyleSheet.absoluteFill}
         />
-      )}
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <StatusBar barStyle={themeMode === "dark" || effectivelyUseGradient ? "light-content" : "dark-content"} />
+
+      {renderBackground()}
+
       {renderHeader ? (
         renderHeader({
           isFirstSlide,
@@ -110,7 +169,7 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
           showBackButton={showBackButton}
           showSkipButton={showSkipButton}
           skipButtonText={skipButtonText}
-          useGradient={useGradient}
+          useGradient={effectivelyUseGradient}
         />
       )}
       {currentSlide &&
@@ -121,13 +180,13 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
             slide={currentSlide}
             value={currentAnswer}
             onChange={onAnswerChange}
-            useGradient={useGradient}
+            useGradient={effectivelyUseGradient}
             variant={variant}
           />
         ) : (
           <OnboardingSlideComponent
             slide={currentSlide}
-            useGradient={useGradient}
+            useGradient={effectivelyUseGradient}
             variant={variant}
           />
         ))}
@@ -152,7 +211,7 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
           nextButtonText={nextButtonText}
           getStartedButtonText={getStartedButtonText}
           disabled={!isAnswerValid}
-          useGradient={useGradient}
+          useGradient={effectivelyUseGradient}
         />
       )}
     </View>
@@ -165,3 +224,4 @@ const styles = StyleSheet.create({
   },
 });
 
+