@umituz/react-native-onboarding 3.6.25 → 3.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.25",
+  "version": "3.6.27",
   "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",
@@ -29,15 +29,15 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
-    "@umituz/react-native-design-system": ">=2.0.0",
-    "@umituz/react-native-localization": ">=1.0.0",
-    "@umituz/react-native-storage": ">=2.6.0",
-    "expo-image": ">=2.0.0",
-    "expo-video": ">=1.0.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "zustand": ">=4.5.2"
+    "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-storage": "latest",
+    "expo-image": ">=3.0.0",
+    "expo-video": ">=3.0.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-safe-area-context": ">=5.0.0",
+    "zustand": ">=5.0.0"
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.0",

package/src/domain/entities/OnboardingSlide.ts

@@ -127,7 +127,7 @@ export interface OnboardingSlide {
   backgroundVideo?: any;
 
   /**
-   * Opacity of the overlay gradient/color on top of background media
+   * Opacity of the overlay color on top of background media
    * Range: 0.0 to 1.0 (Default: 0.5)
    */
   overlayOpacity?: number;

package/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * React Native Onboarding - Public API
  *
- * Generic onboarding flow for React Native apps with gradient backgrounds,
+ * Generic onboarding flow for React Native apps with custom backgrounds,
  * animations, and customizable slides. Follows SOLID, DRY, KISS principles.
  *
  * Architecture:
@@ -19,7 +19,7 @@
  *         title: 'Welcome',
  *         description: 'Welcome to the app',
  *         icon: '🎉',
- *         gradient: ['#3B82F6', '#8B5CF6'],
+ *         backgroundColor: '#3B82F6',
  *       },
  *     ]}
  *     onComplete={() => console.log('Completed')}

package/src/infrastructure/utils/layouts/gridLayouts.ts

@@ -1,6 +1,6 @@
 /**
  * Grid Layout Generators
- * Standard and dense grid layouts
+ * Standard and dense grid layouts with safe area support
  */
 
 import { SCREEN_WIDTH, SCREEN_HEIGHT } from "./screenDimensions";
@@ -10,14 +10,19 @@ export const generateGridLayout = (
   images: ImageSourceType[],
   config: LayoutConfig = {},
 ): ImageLayoutItem[] => {
-  const { columns, gap = 0, borderRadius = 0 } = config;
+  const { columns, gap = 0, borderRadius = 0, safeAreaInsets } = config;
   const count = images.length;
   const cols = columns ?? Math.ceil(Math.sqrt(count));
   const rows = Math.ceil(count / cols);
+
+  const insets = safeAreaInsets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+  const availableWidth = SCREEN_WIDTH - insets.left - insets.right;
+  const availableHeight = SCREEN_HEIGHT - insets.top - insets.bottom;
+
   const totalGapX = gap * (cols - 1);
   const totalGapY = gap * (rows - 1);
-  const cellWidth = (SCREEN_WIDTH - totalGapX) / cols;
-  const cellHeight = (SCREEN_HEIGHT - totalGapY) / rows;
+  const cellWidth = (availableWidth - totalGapX) / cols;
+  const cellHeight = (availableHeight - totalGapY) / rows;
 
   return images.map((source, index) => {
     const col = index % cols;
@@ -27,8 +32,8 @@ export const generateGridLayout = (
       source,
       style: {
         position: "absolute" as const,
-        left: col * (cellWidth + gap),
-        top: row * (cellHeight + gap),
+        left: insets.left + col * (cellWidth + gap),
+        top: insets.top + row * (cellHeight + gap),
         width: cellWidth,
         height: cellHeight,
         borderRadius,
@@ -41,13 +46,18 @@ export const generateDenseGridLayout = (
   images: ImageSourceType[],
   config: LayoutConfig = {},
 ): ImageLayoutItem[] => {
-  const { columns = 6, gap = 2, borderRadius = 4 } = config;
+  const { columns = 6, gap = 2, borderRadius = 4, safeAreaInsets } = config;
   const count = images.length;
   const rows = Math.ceil(count / columns);
+
+  const insets = safeAreaInsets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+  const availableWidth = SCREEN_WIDTH - insets.left - insets.right;
+  const availableHeight = SCREEN_HEIGHT - insets.top - insets.bottom;
+
   const totalGapX = gap * (columns - 1);
   const totalGapY = gap * (rows - 1);
-  const cellWidth = (SCREEN_WIDTH - totalGapX) / columns;
-  const cellHeight = (SCREEN_HEIGHT - totalGapY) / rows;
+  const cellWidth = (availableWidth - totalGapX) / columns;
+  const cellHeight = (availableHeight - totalGapY) / rows;
 
   return images.map((source, index) => {
     const col = index % columns;
@@ -57,8 +67,8 @@ export const generateDenseGridLayout = (
       source,
       style: {
         position: "absolute" as const,
-        left: col * (cellWidth + gap),
-        top: row * (cellHeight + gap),
+        left: insets.left + col * (cellWidth + gap),
+        top: insets.top + row * (cellHeight + gap),
         width: cellWidth,
         height: cellHeight,
         borderRadius,

package/src/infrastructure/utils/layouts/layoutTypes.ts

@@ -7,6 +7,13 @@ import type { ImageSource } from "expo-image";
 
 export type ImageSourceType = ImageSource | number | string;
 
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
 export interface ImageLayoutStyle {
   position: "absolute";
   top: number;
@@ -26,4 +33,5 @@ export interface LayoutConfig {
   gap?: number;
   borderRadius?: number;
   randomizeSize?: boolean;
+  safeAreaInsets?: SafeAreaInsets;
 }

package/src/infrastructure/utils/layouts/screenDimensions.ts

@@ -1,11 +1,11 @@
 /**
  * Screen Dimensions
- * Centralized screen dimension values
+ * Centralized screen dimension values using design system utilities
  */
 
-import { Dimensions } from "react-native";
+import { getScreenDimensions } from "@umituz/react-native-design-system";
 
-const dimensions = Dimensions.get("window");
+const dimensions = getScreenDimensions();
 
 export const SCREEN_WIDTH = dimensions.width;
 export const SCREEN_HEIGHT = dimensions.height;

package/src/presentation/components/BackgroundImageCollage.tsx

@@ -1,11 +1,12 @@
 /**
  * Background Image Collage Component
- * Displays multiple images in various layout patterns
+ * Displays multiple images in various layout patterns with safe area support
  */
 
 import React, { useMemo } from "react";
 import { View, StyleSheet } from "react-native";
 import { Image } from "expo-image";
+import { useSafeAreaInsets } from "@umituz/react-native-design-system";
 import {
   generateGridLayout,
   generateDenseGridLayout,
@@ -57,12 +58,19 @@ export const BackgroundImageCollage: React.FC<BackgroundImageCollageProps> = ({
   borderRadius,
   opacity = 1,
 }) => {
+  const insets = useSafeAreaInsets();
+
   const imageLayouts = useMemo(() => {
     if (!images || images.length === 0) return [];
 
     const generator = LAYOUT_GENERATORS[layout] ?? generateGridLayout;
-    return generator(images, { columns, gap, borderRadius });
-  }, [images, layout, columns, gap, borderRadius]);
+    return generator(images, {
+      columns,
+      gap,
+      borderRadius,
+      safeAreaInsets: insets
+    });
+  }, [images, layout, columns, gap, borderRadius, insets]);
 
   if (imageLayouts.length === 0) return null;
 

package/src/presentation/components/BaseSlide.tsx

@@ -3,8 +3,9 @@
  * Single Responsibility: Provide a base layout for all onboarding slides
  */
 
-import React from "react";
-import { View, StyleSheet, ScrollView } from "react-native";
+import React, { useMemo } from "react";
+import { View, ScrollView } from "react-native";
+import { useAppDesignTokens, useResponsive } from "@umituz/react-native-design-system";
 import type { ContentPosition } from "../../domain/entities/OnboardingSlide";
 
 export interface BaseSlideProps {
@@ -16,41 +17,31 @@ export const BaseSlide = ({
   children,
   contentPosition = "center",
 }: BaseSlideProps) => {
+  const tokens = useAppDesignTokens();
+  const { verticalPadding, horizontalPadding } = useResponsive();
   const isBottom = contentPosition === "bottom";
 
+  const contentContainerStyle = useMemo(() => ({
+    flexGrow: 1,
+    paddingVertical: verticalPadding,
+    justifyContent: isBottom ? "flex-end" as const : "center" as const,
+    paddingBottom: isBottom ? verticalPadding : undefined,
+  }), [verticalPadding, isBottom]);
+
+  const slideContainerStyle = useMemo(() => ({
+    width: "100%" as const,
+    paddingHorizontal: horizontalPadding,
+    alignItems: "center" as const,
+  }), [horizontalPadding]);
+
   return (
     <ScrollView
-      style={styles.container}
-      contentContainerStyle={[
-        styles.content,
-        isBottom ? styles.contentBottom : styles.contentCenter,
-      ]}
+      style={{ flex: 1 }}
+      contentContainerStyle={contentContainerStyle}
       showsVerticalScrollIndicator={false}
       bounces={false}
     >
-      <View style={styles.slideContainer}>{children}</View>
+      <View style={slideContainerStyle}>{children}</View>
     </ScrollView>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flexGrow: 1,
-    paddingVertical: 40,
-  },
-  contentCenter: {
-    justifyContent: "center",
-  },
-  contentBottom: {
-    justifyContent: "flex-end",
-    paddingBottom: 40, // Reduced from 140 as footer handles its own padding
-  },
-  slideContainer: {
-    width: "100%",
-    paddingHorizontal: 24,
-    alignItems: "center",
-  },
-});

package/src/presentation/hooks/__tests__/useOnboardingContainerStyle.test.ts

@@ -39,9 +39,9 @@ describe('useOnboardingContainerStyle', () => {
     } as any);
   });
 
-  it('should return container style with gradient disabled', () => {
+  it('should return container style with custom background disabled', () => {
     const { result } = renderHook(() =>
-      useOnboardingContainerStyle({ useGradient: false })
+      useOnboardingContainerStyle({ useCustomBackground: false })
     );
 
     expect(result.current.containerStyle).toEqual([
@@ -52,9 +52,9 @@ describe('useOnboardingContainerStyle', () => {
     ]);
   });
 
-  it('should return container style with gradient enabled', () => {
+  it('should return container style with custom background enabled', () => {
     const { result } = renderHook(() =>
-      useOnboardingContainerStyle({ useGradient: true })
+      useOnboardingContainerStyle({ useCustomBackground: true })
     );
 
     expect(result.current.containerStyle).toEqual([
@@ -74,7 +74,7 @@ describe('useOnboardingContainerStyle', () => {
     });
 
     const { result } = renderHook(() =>
-      useOnboardingContainerStyle({ useGradient: false })
+      useOnboardingContainerStyle({ useCustomBackground: false })
     );
 
     expect(result.current.containerStyle[0].paddingTop).toBe(50);
@@ -88,7 +88,7 @@ describe('useOnboardingContainerStyle', () => {
     } as any);
 
     const { result } = renderHook(() =>
-      useOnboardingContainerStyle({ useGradient: false })
+      useOnboardingContainerStyle({ useCustomBackground: false })
     );
 
     expect(result.current.containerStyle[0].backgroundColor).toBe('#f0f0f0');