@umituz/react-native-onboarding 3.6.2 → 3.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "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/domain/entities/OnboardingSlide.ts

@@ -11,6 +11,11 @@ import type { OnboardingQuestion } from "./OnboardingQuestion";
  */
 export type SlideType = "info" | "question" | "welcome" | "completion";
 
+/**
+ * Content position - determines where the text content is positioned
+ */
+export type ContentPosition = "center" | "bottom";
+
 /**
  * Onboarding Slide
  * Each slide represents one step in the onboarding flow
@@ -39,13 +44,23 @@ export interface OnboardingSlide {
   /**
    * Icon to display (emoji or icon name)
    */
-  icon: string;
+  icon?: string;
 
   /**
    * Type of icon: 'emoji' or 'icon' (default: 'icon')
    */
   iconType?: 'emoji' | 'icon';
 
+  /**
+   * Hide icon even if provided (default: false)
+   */
+  hideIcon?: boolean;
+
+  /**
+   * Content position: 'center' or 'bottom' (default: 'center')
+   */
+  contentPosition?: ContentPosition;
+
   /**
    * Gradient colors for the slide background (optional)
    * [startColor, endColor] or [color1, color2, color3] for multi-stop gradients
@@ -101,4 +116,3 @@ export interface OnboardingSlide {
    */
   skipIf?: (answers: Record<string, any>) => boolean;
 }
-

package/src/infrastructure/storage/OnboardingStore.ts

@@ -33,13 +33,13 @@ export const useOnboardingStore = createStore<OnboardingStoreState, OnboardingAc
   name: "onboarding-store",
   initialState: initialOnboardingState,
   persist: false,
-  actions: (set, get) => {
+  actions: (set: (state: Partial<OnboardingStoreState>) => void, get: () => OnboardingStoreState) => {
     const actions = createOnboardingStoreActions(set, get);
 
     return {
-      setCurrentStep: (step) => set({ currentStep: step }),
-      setLoading: (loading) => set({ loading }),
-      setError: (error) => set({ error }),
+      setCurrentStep: (step: number) => set({ currentStep: step }),
+      setLoading: (loading: boolean) => set({ loading }),
+      setError: (error: string | null) => set({ error }),
       setState: set,
       getState: get,
 

package/src/presentation/components/BaseSlide.tsx

@@ -5,37 +5,48 @@
 
 import React from "react";
 import { View, StyleSheet, ScrollView } from "react-native";
+import type { ContentPosition } from "../../domain/entities/OnboardingSlide";
 
 export interface BaseSlideProps {
-    children: React.ReactNode;
+  children: React.ReactNode;
+  contentPosition?: ContentPosition;
 }
 
-export const BaseSlide = ({ children }: BaseSlideProps) => {
-    return (
-        <ScrollView
-            style={styles.container}
-            contentContainerStyle={styles.content}
-            showsVerticalScrollIndicator={false}
-            bounces={false}
-        >
-            <View style={styles.slideContainer}>
-                {children}
-            </View>
-        </ScrollView>
-    );
+export const BaseSlide = ({ children, contentPosition = "center" }: BaseSlideProps) => {
+  const isBottom = contentPosition === "bottom";
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={[
+        styles.content,
+        isBottom && styles.contentBottom
+      ]}
+      showsVerticalScrollIndicator={false}
+      bounces={false}
+    >
+      <View style={styles.slideContainer}>
+        {children}
+      </View>
+    </ScrollView>
+  );
 };
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    content: {
-        flexGrow: 1,
-        justifyContent: "center",
-        paddingVertical: 40,
-    },
-    slideContainer: {
-        paddingHorizontal: 24,
-        alignItems: "center",
-    },
+  container: {
+    flex: 1,
+  },
+  content: {
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingVertical: 40,
+  },
+  contentBottom: {
+    justifyContent: "flex-end",
+    paddingBottom: 140,
+  },
+  slideContainer: {
+    paddingHorizontal: 24,
+    alignItems: "center",
+  },
 });

package/src/presentation/components/OnboardingSlide.tsx

@@ -21,13 +21,14 @@ export const OnboardingSlide = ({
 }: OnboardingSlideProps) => {
   const { colors } = useOnboardingTheme();
 
-  const hasIcon = !!slide.icon;
+  const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';
   const iconSize = variant === "minimal" ? 80 : 72;
+  const contentPosition = slide.contentPosition || "center";
 
   return (
-    <BaseSlide>
-      {hasIcon && (
+    <BaseSlide contentPosition={contentPosition}>
+      {shouldShowIcon && slide.icon && (
         <View style={styles.iconBox}>
           {isEmoji ? (
             <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>