@umituz/react-native-onboarding 3.3.6 → 3.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.3.6",
+  "version": "3.3.8",
   "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",
@@ -36,9 +36,9 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system": "latest",
     "@expo/vector-icons": ">=14.0.0",
-    "expo-av": ">=15.0.0",
     "expo-image": ">=2.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-video": ">=1.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -50,9 +50,9 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system": "latest",
     "@expo/vector-icons": "^14.0.0",
-    "expo-av": "~15.0.0",
     "expo-image": "~2.0.0",
     "expo-linear-gradient": "^15.0.7",
+    "expo-video": "~2.0.0",
     "zustand": "^5.0.0",
     "@types/react": "~19.1.10",
     "react": "19.1.0",
@@ -68,4 +68,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/BackgroundVideo.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+
+interface BackgroundVideoProps {
+    source: any;
+    overlayOpacity?: number;
+}
+
+export const BackgroundVideo: React.FC<BackgroundVideoProps> = ({ source, overlayOpacity = 0.5 }) => {
+    const player = useVideoPlayer(source, player => {
+        player.loop = true;
+        player.play();
+        player.muted = true;
+    });
+
+    return (
+        <View style={StyleSheet.absoluteFill}>
+            <VideoView
+                player={player}
+                style={StyleSheet.absoluteFill}
+                contentFit="cover"
+                nativeControls={false}
+            />
+            <View
+                style={[
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: `rgba(0,0,0,${overlayOpacity})` }
+                ]}
+            />
+        </View>
+    );
+};

package/src/presentation/components/OnboardingFooter.tsx

@@ -43,8 +43,8 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
   const styles = useMemo(() => getStyles(insets, tokens, useGradient), [insets, tokens, useGradient]);
 
   const buttonText = isLastSlide
-    ? getStartedButtonText || t("onboarding.getStarted", "Get Started")
-    : nextButtonText || t("general.continue", "Continue");
+    ? getStartedButtonText || t("onboarding.getStarted")
+    : nextButtonText || t("general.continue");
 
   return (
     <View style={styles.footer}>
@@ -85,7 +85,7 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
 
       {showProgressText && (
         <Text style={styles.progressText}>
-          {currentIndex + 1} {t("general.of", "of")} {totalSlides}
+          {currentIndex + 1} {t("general.of")} {totalSlides}
         </Text>
       )}
     </View>
@@ -108,15 +108,15 @@ const getStyles = (
     },
     progressBar: {
       height: 4,
-      backgroundColor: useGradient 
-        ? "rgba(255, 255, 255, 0.2)" 
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.2)"
         : tokens.colors.borderLight,
       borderRadius: 2,
       overflow: "hidden",
     },
     progressFill: {
       height: "100%",
-      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
+      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
       borderRadius: 2,
     },
     dots: {
@@ -129,24 +129,24 @@ const getStyles = (
       width: 6,
       height: 6,
       borderRadius: 3,
-      backgroundColor: useGradient 
-        ? "rgba(255, 255, 255, 0.4)" 
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.4)"
         : tokens.colors.borderLight,
     },
     dotActive: {
       width: 8,
-      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
+      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
     },
     button: {
-      backgroundColor: useGradient ? "#FFFFFF" : tokens.colors.primary,
+      backgroundColor: useGradient ? tokens.colors.surface : tokens.colors.primary,
       paddingVertical: 16,
       borderRadius: 28,
       alignItems: "center",
       marginBottom: 12,
     },
     buttonDisabled: {
-      backgroundColor: useGradient 
-        ? "rgba(255, 255, 255, 0.4)" 
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.4)"
         : tokens.colors.borderLight,
       opacity: 0.5,
     },
@@ -156,13 +156,13 @@ const getStyles = (
       fontWeight: "bold",
     },
     buttonTextDisabled: {
-      color: useGradient 
-        ? "rgba(255, 255, 255, 0.6)" 
+      color: useGradient
+        ? "rgba(255, 255, 255, 0.6)"
         : tokens.colors.textSecondary,
     },
     progressText: {
-      color: useGradient 
-        ? "rgba(255, 255, 255, 0.75)" 
+      color: useGradient
+        ? "rgba(255, 255, 255, 0.75)"
         : tokens.colors.textSecondary,
       fontSize: 12,
       textAlign: "center",

package/src/presentation/components/OnboardingHeader.tsx

@@ -33,7 +33,7 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
 
-  const skipText = skipButtonText || t("onboarding.skip", "Skip");
+  const skipText = skipButtonText || t("onboarding.skip");
 
   const handleBackPress = () => {
     /* eslint-disable-next-line no-console */
@@ -61,7 +61,7 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
           <AtomicIcon
             name="chevron-back"
             customSize={20}
-            customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
+            customColor={useGradient ? tokens.colors.surface : tokens.colors.textPrimary}
           />
         </TouchableOpacity>
       ) : (
@@ -107,7 +107,7 @@ const getStyles = (
       opacity: 0.3,
     },
     skipText: {
-      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
+      color: useGradient ? tokens.colors.surface : tokens.colors.textPrimary,
       fontSize: 16,
       fontWeight: "600",
     },

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -7,13 +7,13 @@ 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";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { OnboardingHeader } from "./OnboardingHeader";
 import { OnboardingSlide as OnboardingSlideComponent } from "./OnboardingSlide";
 import { QuestionSlide } from "./QuestionSlide";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { BackgroundVideo } from "./BackgroundVideo";
 
 export interface OnboardingScreenContentProps {
   containerStyle?: any;
@@ -97,22 +97,10 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
 
     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>
+        <BackgroundVideo
+          source={currentSlide.backgroundVideo}
+          overlayOpacity={overlayOpacity}
+        />
       );
     }
 
@@ -223,5 +211,3 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
-

package/src/presentation/components/OnboardingSlide.tsx

@@ -36,7 +36,7 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({
   // Simple check for valid icon name - assuming string and not emoji
   const isValidIconName = !isEmoji && typeof slide.icon === "string" && slide.icon.length > 0;
 
-  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.primary;
+  const iconColor = useGradient ? tokens.colors.surface : tokens.colors.primary;
   const iconSize = variant === "minimal" ? 80 : 64;
 
   const renderIcon = () => {

package/src/presentation/styles/OnboardingSlideStyles.ts

@@ -79,11 +79,6 @@ export const createOnboardingStyles = (
                 alignItems: "center",
                 // Shadow only for non-gradient or light mode
                 ...(!useGradient && {
-                    shadowColor: tokens.colors.shadow,
-                    shadowOffset: { width: 0, height: 4 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 12,
-                    elevation: 5,
                     borderWidth: 1,
                     borderColor: tokens.colors.borderLight,
                 }),