@umituz/react-native-splash 2.1.7 → 2.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "Minimal prop-driven splash screen for React Native apps with design system integration.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/components/SplashScreen.tsx

@@ -1,7 +1,7 @@
 /**
  * Splash Screen Component
- * Fully prop-driven splash screen - no provider required
- * Main app controls all styling via props
+ * Supports both prop-driven and provider-based theming
+ * Main app controls all styling via props or SplashThemeProvider
  */
 
 import React, { useEffect, useState, useCallback } from "react";
@@ -9,18 +9,24 @@ import { View, Image, StyleSheet } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { AtomicText } from "@umituz/react-native-design-system";
-import type { SplashScreenProps } from "../types";
+import type { SplashScreenProps, SplashColors } from "../types";
+import { useSplashTheme } from "../providers/SplashThemeProvider";
 
 const ICON_SIZE = 120;
 const ICON_PLACEHOLDER_SIZE = 100;
 const CONTENT_PADDING = 24;
 
+const DEFAULT_COLORS: SplashColors = {
+  background: "#000000",
+  text: "#FFFFFF",
+};
+
 export const SplashScreen: React.FC<SplashScreenProps> = ({
   icon,
   appName,
   tagline,
-  colors,
-  gradientColors,
+  colors: propColors,
+  gradientColors: propGradientColors,
   visible = true,
   maxDuration,
   onTimeout,
@@ -29,6 +35,10 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
 }) => {
   const insets = useSafeAreaInsets();
   const [timedOut, setTimedOut] = useState(false);
+  const themeContext = useSplashTheme();
+
+  const colors = propColors ?? themeContext?.colors ?? DEFAULT_COLORS;
+  const gradientColors = propGradientColors ?? themeContext?.gradientColors;
 
   const handleTimeout = useCallback(() => {
     if (__DEV__) {

package/src/index.ts

@@ -1,24 +1,24 @@
 /**
  * React Native Splash - Public API
  *
- * Minimal splash screen for React Native apps.
- * Fully prop-driven - no provider required.
+ * Splash screen for React Native apps with theme support.
+ * Supports both prop-driven and provider-based theming.
  *
- * Usage:
- *   import { SplashScreen } from '@umituz/react-native-splash';
+ * Usage with provider:
+ *   import { SplashScreen, SplashThemeProvider } from '@umituz/react-native-splash';
  *
- *   <SplashScreen
- *     appName="My App"
- *     tagline="Your tagline here"
- *     colors={{
- *       background: tokens.colors.primary,
- *       text: tokens.colors.onPrimary,
- *     }}
- *     icon={require('./assets/icon.png')}
- *     onReady={() => setReady(true)}
- *   />
+ *   <SplashThemeProvider
+ *     gradientColors={[tokens.colors.primary, tokens.colors.secondary]}
+ *     customColors={{ textColor: tokens.colors.onPrimary }}
+ *   >
+ *     <SplashScreen
+ *       appName="My App"
+ *       tagline="Your tagline here"
+ *       icon={require('./assets/icon.png')}
+ *     />
+ *   </SplashThemeProvider>
  *
- * With gradient:
+ * Usage with props:
  *   <SplashScreen
  *     appName="My App"
  *     colors={{ background: '#000', text: '#fff' }}
@@ -26,5 +26,17 @@
  *   />
  */
 
-export type { SplashScreenProps, SplashColors } from "./types";
+// Types
+export type {
+  SplashScreenProps,
+  SplashColors,
+  SplashCustomColors,
+  SplashThemeProviderProps,
+  SplashThemeContextValue,
+} from "./types";
+
+// Components
 export { SplashScreen } from "./components/SplashScreen";
+
+// Providers
+export { SplashThemeProvider, useSplashTheme } from "./providers";

package/src/providers/SplashThemeProvider.tsx

@@ -0,0 +1,48 @@
+/**
+ * Splash Theme Provider
+ * Provides theme context for SplashScreen components
+ */
+
+import React, { createContext, useContext, useMemo } from "react";
+import type {
+  SplashThemeProviderProps,
+  SplashThemeContextValue,
+} from "../types";
+
+const DEFAULT_COLORS = {
+  background: "#000000",
+  text: "#FFFFFF",
+};
+
+const SplashThemeContext = createContext<SplashThemeContextValue | null>(null);
+
+export const useSplashTheme = (): SplashThemeContextValue | null => {
+  return useContext(SplashThemeContext);
+};
+
+export const SplashThemeProvider: React.FC<SplashThemeProviderProps> = ({
+  children,
+  gradientColors,
+  customColors,
+}) => {
+  const value = useMemo<SplashThemeContextValue>(() => {
+    const background =
+      customColors?.backgroundColor ??
+      (gradientColors?.[0] || DEFAULT_COLORS.background);
+
+    return {
+      colors: {
+        background,
+        text: customColors?.textColor ?? DEFAULT_COLORS.text,
+        iconPlaceholder: customColors?.iconPlaceholderColor,
+      },
+      gradientColors,
+    };
+  }, [gradientColors, customColors]);
+
+  return (
+    <SplashThemeContext.Provider value={value}>
+      {children}
+    </SplashThemeContext.Provider>
+  );
+};

package/src/providers/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Splash Providers
+ */
+
+export { SplashThemeProvider, useSplashTheme } from "./SplashThemeProvider";

package/src/types/index.ts

@@ -4,6 +4,7 @@
  */
 
 import type { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import type { ReactNode } from "react";
 
 /**
  * Splash screen color configuration
@@ -18,9 +19,43 @@ export interface SplashColors {
   iconPlaceholder?: string;
 }
 
+/**
+ * Custom colors for SplashThemeProvider
+ */
+export interface SplashCustomColors {
+  /** Text color for app name and tagline */
+  textColor: string;
+  /** Background color when not using gradient */
+  backgroundColor?: string;
+  /** Background color for icon placeholder circle */
+  iconPlaceholderColor?: string;
+}
+
+/**
+ * SplashThemeProvider props
+ */
+export interface SplashThemeProviderProps {
+  /** Children components */
+  children: ReactNode;
+  /** Gradient colors for background */
+  gradientColors?: readonly [string, string, ...string[]];
+  /** Custom color configuration */
+  customColors?: SplashCustomColors;
+}
+
+/**
+ * Splash theme context value
+ */
+export interface SplashThemeContextValue {
+  /** Resolved colors for splash screen */
+  colors: SplashColors;
+  /** Gradient colors if provided */
+  gradientColors?: readonly [string, string, ...string[]];
+}
+
 /**
  * Splash screen component props
- * Fully prop-driven - no provider required
+ * Can be used standalone with colors prop or with SplashThemeProvider
  */
 export interface SplashScreenProps {
   /** App name to display */
@@ -32,8 +67,8 @@ export interface SplashScreenProps {
   /** App icon/logo image source */
   icon?: ImageSourcePropType;
 
-  /** Color configuration - required for proper theming */
-  colors: SplashColors;
+  /** Color configuration - optional when using SplashThemeProvider */
+  colors?: SplashColors;
 
   /** Optional gradient colors (overrides background color) */
   gradientColors?: readonly [string, string, ...string[]];