@umituz/react-native-onboarding 3.6.24 → 3.6.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.24",
+  "version": "3.6.26",
   "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/OnboardingOptions.ts

@@ -87,10 +87,10 @@ export interface OnboardingOptions {
   showPaywallOnComplete?: boolean;
 
   /**
-   * Use gradient background for all slides (default: false)
-   * When true, all slides will use gradient backgrounds if available
+   * Use custom background for all slides (default: false)
+   * When true, all slides will use custom backgrounds if available
    */
-  useGradient?: boolean;
+  useCustomBackground?: boolean;
 
   /**
    * Visual theme variant (default: "default")

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/presentation/components/OnboardingScreenContent.tsx

@@ -16,7 +16,7 @@ import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
 
 export const OnboardingScreenContent = ({
   containerStyle,
-  useGradient,
+  useCustomBackground,
   currentSlide,
   isFirstSlide,
   isLastSlide,
@@ -57,7 +57,7 @@ export const OnboardingScreenContent = ({
     !!currentSlide?.backgroundVideo ||
     (!!currentSlide?.backgroundImages && currentSlide.backgroundImages.length > 0);
   const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
-  const effectivelyUseGradient = useGradient || hasMedia;
+  const showOverlay = useCustomBackground || hasMedia;
 
   return (
     <View
@@ -66,7 +66,7 @@ export const OnboardingScreenContent = ({
     >
       <StatusBar
         barStyle={
-          themeMode === "dark" || effectivelyUseGradient
+          themeMode === "dark" || showOverlay
             ? "light-content"
             : "dark-content"
         }
@@ -74,8 +74,8 @@ export const OnboardingScreenContent = ({
 
       <OnboardingBackground
         currentSlide={currentSlide}
-        useGradient={useGradient}
-        effectivelyUseGradient={effectivelyUseGradient}
+        useCustomBackground={useCustomBackground}
+        showOverlay={showOverlay}
         overlayOpacity={overlayOpacity}
       />
 

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');

package/src/presentation/providers/OnboardingProvider.tsx

@@ -16,23 +16,23 @@ const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undef
 
 export interface OnboardingProviderProps {
   children: React.ReactNode;
-  useGradient: boolean;
+  useCustomBackground: boolean;
   colors: OnboardingColors;
 }
 
 export const OnboardingProvider = ({
   children,
-  useGradient,
+  useCustomBackground,
   colors,
 }: OnboardingProviderProps) => {
   const value = useMemo(
     () => ({
       theme: {
         colors,
-        useGradient,
+        useCustomBackground,
       },
     }),
-    [colors, useGradient]
+    [colors, useCustomBackground]
   );
 
   return (

package/src/presentation/screens/OnboardingScreen.tsx

@@ -80,7 +80,7 @@ export const OnboardingScreen = ({
   renderSlide,
   onUpgrade,
   showPaywallOnComplete = false,
-  useGradient: globalUseGradient = false,
+  useCustomBackground: globalUseCustomBackground = false,
   themeVariant = "default",
   themeColors: providedThemeColors,
 }: OnboardingScreenProps) => {
@@ -121,7 +121,7 @@ export const OnboardingScreen = ({
     isLastSlide,
     currentAnswer,
     isAnswerValid,
-    useGradient,
+    useCustomBackground,
     containerStyle,
     handleNext,
     handlePrevious,
@@ -132,7 +132,7 @@ export const OnboardingScreen = ({
     storageKey,
     onComplete,
     onSkip,
-    globalUseGradient,
+    globalUseCustomBackground,
   });
 
   if (__DEV__) {
@@ -148,10 +148,10 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingProvider useGradient={useGradient} colors={themeColors}>
+    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
-        useGradient={useGradient}
+        useCustomBackground={useCustomBackground}
         currentSlide={currentSlide}
         isFirstSlide={isFirstSlide}
         isLastSlide={isLastSlide}

package/src/presentation/types/OnboardingProps.ts

@@ -6,7 +6,7 @@ import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 
 export interface OnboardingScreenContentProps {
   containerStyle?: any;
-  useGradient: boolean;
+  useCustomBackground: boolean;
   currentSlide: OnboardingSlide | undefined;
   isFirstSlide: boolean;
   isLastSlide: boolean;

package/src/presentation/types/OnboardingTheme.ts

@@ -23,5 +23,5 @@ export interface OnboardingColors {
 
 export interface OnboardingTheme {
   colors: OnboardingColors;
-  useGradient: boolean;
+  useCustomBackground: boolean;
 }