@umituz/react-native-onboarding 3.6.7 → 3.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.7",
+  "version": "3.6.9",
   "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",

package/src/infrastructure/utils/gradientUtils.ts

@@ -21,15 +21,20 @@ export function shouldUseGradient(
     return false;
   }
 
+  // If there is background media, we always treat it as "dark mode" for accessibility (white text)
+  if (slide.backgroundImage || slide.backgroundVideo) {
+    return true;
+  }
+
   // If global useGradient is true, use gradient if slide has gradient defined
   if (globalUseGradient === true) {
-    return slide.gradient !== undefined && slide.gradient.length > 0;
+    return !!slide.gradient && slide.gradient.length > 0;
   }
 
   // Otherwise, check slide's own useGradient prop
   return (
     slide.useGradient === true &&
-    slide.gradient !== undefined &&
+    !!slide.gradient &&
     slide.gradient.length > 0
   );
 }

package/src/presentation/components/BaseSlide.tsx

@@ -12,7 +12,10 @@ export interface BaseSlideProps {
   contentPosition?: ContentPosition;
 }
 
-export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlideProps) => {
+export const BaseSlide = ({
+  children,
+  contentPosition = "center",
+}: BaseSlideProps) => {
   const isBottom = contentPosition === "bottom";
 
   return (
@@ -20,14 +23,12 @@ export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlidePro
       style={styles.container}
       contentContainerStyle={[
         styles.content,
-        isBottom && styles.contentBottom
+        isBottom ? styles.contentBottom : styles.contentCenter,
       ]}
       showsVerticalScrollIndicator={false}
       bounces={false}
     >
-      <View style={styles.slideContainer}>
-        {children}
-      </View>
+      <View style={styles.slideContainer}>{children}</View>
     </ScrollView>
   );
 };
@@ -38,14 +39,17 @@ const styles = StyleSheet.create({
   },
   content: {
     flexGrow: 1,
-    justifyContent: "center",
     paddingVertical: 40,
   },
+  contentCenter: {
+    justifyContent: "center",
+  },
   contentBottom: {
     justifyContent: "flex-end",
-    paddingBottom: 140,
+    paddingBottom: 40, // Reduced from 140 as footer handles its own padding
   },
   slideContainer: {
+    width: "100%",
     paddingHorizontal: 24,
     alignItems: "center",
   },

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -90,19 +90,22 @@ export const OnboardingScreenContent = ({
         />
       )}
 
-      {currentSlide &&
-        (renderSlide ? (
-          renderSlide(currentSlide)
-        ) : currentSlide.type === "question" && currentSlide.question ? (
-          <QuestionSlide
-            slide={currentSlide}
-            value={currentAnswer}
-            onChange={onAnswerChange}
-            variant={variant}
-          />
-        ) : (
-          <OnboardingSlideComponent slide={currentSlide} variant={variant} />
-        ))}
+      {currentSlide && (
+        <View style={styles.content}>
+          {renderSlide ? (
+            renderSlide(currentSlide)
+          ) : currentSlide.type === "question" && currentSlide.question ? (
+            <QuestionSlide
+              slide={currentSlide}
+              value={currentAnswer}
+              onChange={onAnswerChange}
+              variant={variant}
+            />
+          ) : (
+            <OnboardingSlideComponent slide={currentSlide} variant={variant} />
+          )}
+        </View>
+      )}
 
       {renderFooter ? (
         renderFooter({
@@ -135,4 +138,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+  },
 });

package/src/presentation/components/QuestionSlide.tsx

@@ -33,7 +33,7 @@ export const QuestionSlide = ({
   if (!question) return null;
 
   return (
-    <BaseSlide>
+    <BaseSlide contentPosition={slide.contentPosition}>
       <QuestionSlideHeader slide={slide} />
 
       <View style={styles.questionContainer}>