@umituz/react-native-design-system 4.25.34 → 4.25.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.34",
+  "version": "4.25.35",
   "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": "./src/index.ts",

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

@@ -1,29 +1,41 @@
 /**
  * Onboarding Background Component
- * Handles rendering of video, image or solid backgrounds
+ * Handles rendering of video, image or solid backgrounds.
+ *
+ * expo-video is an OPTIONAL peer dependency.
+ * Pass a VideoComponent prop to enable video backgrounds.
+ * Without it the video slide type is silently skipped.
  */
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-import { BackgroundVideo } from "./BackgroundVideo";
 import { BackgroundImageCollage } from "./BackgroundImageCollage";
 import { AtomicImage } from "../../../atoms/image/AtomicImage";
 
+type VideoComponentType = React.ComponentType<{
+  source: unknown;
+  overlayOpacity?: number;
+}>;
+
 interface BackgroundContentProps {
   slide: OnboardingSlide;
   useCustomBackground: boolean;
   overlayOpacity: number;
+  VideoComponent?: VideoComponentType;
 }
 
 const BackgroundContent: React.FC<BackgroundContentProps> = ({
   slide,
   useCustomBackground,
   overlayOpacity,
+  VideoComponent,
 }) => {
   if (slide.backgroundVideo) {
+    // Only render if the consuming app injected a VideoComponent (requires expo-video)
+    if (!VideoComponent) return null;
     return (
-      <BackgroundVideo
+      <VideoComponent
         source={slide.backgroundVideo}
         overlayOpacity={overlayOpacity}
       />
@@ -68,11 +80,21 @@ const BackgroundContent: React.FC<BackgroundContentProps> = ({
   return null;
 };
 
-interface OnboardingBackgroundProps {
+export interface OnboardingBackgroundProps {
   currentSlide: OnboardingSlide | undefined;
   useCustomBackground: boolean;
   showOverlay: boolean;
   overlayOpacity: number;
+  /**
+   * Optional video background component.
+   * Required only when slides use `backgroundVideo`.
+   * Import from `./BackgroundVideo` in apps that have expo-video installed.
+   *
+   * @example
+   * import { BackgroundVideo } from '@umituz/react-native-design-system/onboarding';
+   * <OnboardingScreen VideoComponent={BackgroundVideo} ... />
+   */
+  VideoComponent?: VideoComponentType;
 }
 
 export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
@@ -80,6 +102,7 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
   useCustomBackground,
   showOverlay,
   overlayOpacity,
+  VideoComponent,
 }) => {
   if (!currentSlide) return null;
 
@@ -89,6 +112,7 @@ export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
         slide={currentSlide}
         useCustomBackground={useCustomBackground}
         overlayOpacity={overlayOpacity}
+        VideoComponent={VideoComponent}
       />
       <View
         style={[

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

@@ -42,6 +42,7 @@ export const OnboardingScreenContent = ({
   onUpgrade,
   showPaywallOnComplete,
   variant = "default",
+  VideoComponent,
 }: OnboardingScreenContentProps) => {
   const { themeMode } = useTheme();
 
@@ -77,6 +78,7 @@ export const OnboardingScreenContent = ({
         useCustomBackground={useCustomBackground}
         showOverlay={showOverlay}
         overlayOpacity={overlayOpacity}
+        VideoComponent={VideoComponent}
       />
 
       {renderHeader ? (

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

@@ -64,6 +64,17 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * All translations for the onboarding (required)
    */
   translations: OnboardingTranslations;
+
+  /**
+   * Optional video background component.
+   * Required only when slides use `backgroundVideo`.
+   * Import from expo-video in apps that have it installed.
+   *
+   * @example
+   * import { BackgroundVideo } from '@umituz/react-native-design-system/onboarding';
+   * <OnboardingScreen VideoComponent={BackgroundVideo} ... />
+   */
+  VideoComponent?: React.ComponentType<{ source: unknown; overlayOpacity?: number }>;
 }
 
 export const OnboardingScreen = ({
@@ -88,6 +99,7 @@ export const OnboardingScreen = ({
   themeVariant = "default",
   themeColors: providedThemeColors,
   translations,
+  VideoComponent,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
   }
@@ -180,6 +192,7 @@ export const OnboardingScreen = ({
         onUpgrade={onUpgrade}
         showPaywallOnComplete={showPaywallOnComplete}
         variant={themeVariant}
+        VideoComponent={VideoComponent}
       />
     </OnboardingProvider>
   );

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

@@ -2,6 +2,7 @@
  * Onboarding Screen Content Props
  */
 
+import type React from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingAnswerValue } from "../../domain/entities/OnboardingQuestion";
@@ -45,4 +46,5 @@ export interface OnboardingScreenContentProps {
   onUpgrade?: () => void;
   showPaywallOnComplete?: boolean;
   variant?: "default" | "card" | "minimal" | "fullscreen";
+  VideoComponent?: React.ComponentType<{ source: unknown; overlayOpacity?: number }>;
 }