@umituz/react-native-splash 2.1.6 → 2.1.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "2.1.6",
-  "description": "Ultra minimal splash screen for React Native apps with design system integration and theme provider pattern.",
+  "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",
   "scripts": {
@@ -18,7 +18,7 @@
     "loading",
     "minimal",
     "design-system",
-    "theme-provider"
+    "prop-driven"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -29,16 +29,14 @@
   "peerDependencies": {
     "@umituz/react-native-design-system": "latest",
     "expo-linear-gradient": ">=13.0.0",
-    "expo-splash-screen": ">=0.23.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
     "@umituz/react-native-design-system": "latest",
-    "expo-linear-gradient": "~15.0.7",
-    "expo-splash-screen": "~0.27.0",
     "@types/react": "~19.1.10",
+    "expo-linear-gradient": "~15.0.7",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.0",

package/src/components/SplashScreen.tsx

@@ -0,0 +1,181 @@
+/**
+ * Splash Screen Component
+ * Supports both prop-driven and provider-based theming
+ * Main app controls all styling via props or SplashThemeProvider
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+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, 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: propColors,
+  gradientColors: propGradientColors,
+  visible = true,
+  maxDuration,
+  onTimeout,
+  onReady,
+  style,
+}) => {
+  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__) {
+      console.log(`[SplashScreen] Timeout reached: ${maxDuration}ms`);
+    }
+    setTimedOut(true);
+    onTimeout?.();
+  }, [maxDuration, onTimeout]);
+
+  useEffect(() => {
+    if (__DEV__) {
+      console.log("[SplashScreen] Mounted", { appName, visible });
+    }
+    onReady?.();
+  }, [appName, visible, onReady]);
+
+  useEffect(() => {
+    if (!maxDuration || !visible) return;
+
+    const timer = setTimeout(handleTimeout, maxDuration);
+    return () => clearTimeout(timer);
+  }, [maxDuration, visible, handleTimeout]);
+
+  if (!visible) {
+    if (__DEV__) {
+      console.log("[SplashScreen] Not visible, returning null");
+    }
+    return null;
+  }
+
+  const iconPlaceholderColor = colors.iconPlaceholder ?? `${colors.text}30`;
+
+  const contentStyle = {
+    paddingTop: insets.top + CONTENT_PADDING,
+    paddingBottom: insets.bottom + CONTENT_PADDING,
+  };
+
+  const content = (
+    <View style={[styles.content, contentStyle]}>
+      <View style={styles.center}>
+        {icon ? (
+          <Image source={icon} style={styles.icon} resizeMode="contain" />
+        ) : (
+          <View
+            style={[
+              styles.iconPlaceholder,
+              { backgroundColor: iconPlaceholderColor },
+            ]}
+          />
+        )}
+
+        {appName ? (
+          <AtomicText
+            type="displaySmall"
+            style={[styles.title, { color: colors.text }]}
+          >
+            {appName}
+          </AtomicText>
+        ) : null}
+
+        {tagline ? (
+          <AtomicText
+            type="bodyLarge"
+            style={[styles.tagline, { color: colors.text }]}
+          >
+            {tagline}
+          </AtomicText>
+        ) : null}
+
+        {timedOut && __DEV__ ? (
+          <AtomicText
+            type="labelSmall"
+            style={[styles.timeoutText, { color: colors.text }]}
+          >
+            Initialization timeout
+          </AtomicText>
+        ) : null}
+      </View>
+    </View>
+  );
+
+  if (gradientColors && gradientColors.length >= 2) {
+    return (
+      <LinearGradient
+        colors={gradientColors as [string, string, ...string[]]}
+        style={[styles.container, style]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 0, y: 1 }}
+      >
+        {content}
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }, style]}>
+      {content}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    justifyContent: "space-between",
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: CONTENT_PADDING,
+  },
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    marginBottom: CONTENT_PADDING,
+  },
+  iconPlaceholder: {
+    width: ICON_PLACEHOLDER_SIZE,
+    height: ICON_PLACEHOLDER_SIZE,
+    borderRadius: ICON_PLACEHOLDER_SIZE / 2,
+    marginBottom: CONTENT_PADDING,
+  },
+  title: {
+    textAlign: "center",
+    fontWeight: "800",
+    marginBottom: 8,
+  },
+  tagline: {
+    textAlign: "center",
+    opacity: 0.9,
+  },
+  timeoutText: {
+    textAlign: "center",
+    marginTop: 16,
+  },
+});

package/src/index.ts

@@ -1,28 +1,42 @@
 /**
  * React Native Splash - Public API
  *
- * Ultra minimal splash screen for React Native apps.
- * Centralized theme management with provider pattern.
+ * Splash screen for React Native apps with theme support.
+ * Supports both prop-driven and provider-based theming.
  *
- * Usage:
- *   import { SplashThemeProvider, SplashScreen } from '@umituz/react-native-splash';
+ * Usage with provider:
+ *   import { SplashScreen, SplashThemeProvider } from '@umituz/react-native-splash';
  *
- *   <SplashThemeProvider gradientColors={['#FF0080', '#7928CA']}>
+ *   <SplashThemeProvider
+ *     gradientColors={[tokens.colors.primary, tokens.colors.secondary]}
+ *     customColors={{ textColor: tokens.colors.onPrimary }}
+ *   >
  *     <SplashScreen
- *       icon={require('./assets/icon.png')}
  *       appName="My App"
  *       tagline="Your tagline here"
- *       visible={showSplash}
- *       maxDuration={10000}
- *       onTimeout={() => console.warn('Splash timeout')}
+ *       icon={require('./assets/icon.png')}
  *     />
  *   </SplashThemeProvider>
+ *
+ * Usage with props:
+ *   <SplashScreen
+ *     appName="My App"
+ *     colors={{ background: '#000', text: '#fff' }}
+ *     gradientColors={['#FF0080', '#7928CA']}
+ *   />
  */
 
-export type { SplashOptions } from "./domain/entities/SplashOptions";
-export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
-export {
-  SplashThemeProvider,
-  type SplashThemeProviderProps,
-  useSplashTheme,
-} from "./presentation/providers/SplashThemeProvider";
+// 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

@@ -0,0 +1,90 @@
+/**
+ * Splash Screen Types
+ * All type definitions for the splash screen package
+ */
+
+import type { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import type { ReactNode } from "react";
+
+/**
+ * Splash screen color configuration
+ * All colors should be provided by the main app via design tokens
+ */
+export interface SplashColors {
+  /** Background color when not using gradient */
+  background: string;
+  /** Text color for app name and tagline */
+  text: string;
+  /** Background color for icon placeholder circle */
+  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
+ * Can be used standalone with colors prop or with SplashThemeProvider
+ */
+export interface SplashScreenProps {
+  /** App name to display */
+  appName?: string;
+
+  /** Tagline or subtitle */
+  tagline?: string;
+
+  /** App icon/logo image source */
+  icon?: ImageSourcePropType;
+
+  /** Color configuration - optional when using SplashThemeProvider */
+  colors?: SplashColors;
+
+  /** Optional gradient colors (overrides background color) */
+  gradientColors?: readonly [string, string, ...string[]];
+
+  /** Control visibility */
+  visible?: boolean;
+
+  /** Maximum duration before timeout callback */
+  maxDuration?: number;
+
+  /** Callback when max duration is reached */
+  onTimeout?: () => void;
+
+  /** Callback when splash is ready/mounted */
+  onReady?: () => void;
+
+  /** Additional container style */
+  style?: StyleProp<ViewStyle>;
+}

package/src/domain/entities/SplashOptions.ts

@@ -1,17 +0,0 @@
-/**
- * Splash Options - Ultra Minimal Configuration
- * Theme/colors managed by SplashThemeProvider
- */
-
-import type { ImageSourcePropType } from "react-native";
-
-export interface SplashOptions {
-  /** App icon/logo image source */
-  icon?: ImageSourcePropType;
-
-  /** App name to display */
-  appName?: string;
-
-  /** Tagline or subtitle */
-  tagline?: string;
-}

package/src/presentation/components/SplashScreen.tsx

@@ -1,184 +0,0 @@
-/**
- * Splash Screen Component
- * Ultra minimal splash screen with design system integration
- * Parent component controls visibility and timing
- */
-
-import React, { useEffect, useState } from "react";
-import { View, Image, StyleSheet } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
-import type { SplashOptions } from "../../domain/entities/SplashOptions";
-import { useSplashTheme } from "../providers/SplashThemeProvider";
-
-export interface SplashScreenProps extends SplashOptions {
-  visible?: boolean;
-  maxDuration?: number;
-  onTimeout?: () => void;
-}
-
-export const SplashScreen: React.FC<SplashScreenProps> = ({
-  icon,
-  appName = "",
-  tagline = "",
-  visible = true,
-  maxDuration,
-  onTimeout,
-}) => {
-  const insets = useSafeAreaInsets();
-  const tokens = useAppDesignTokens();
-  const { colors, gradientColors } = useSplashTheme();
-  const [timedOut, setTimedOut] = useState(false);
-
-  useEffect(() => {
-    if (__DEV__) {
-      console.log(`[SplashScreen] Mounted - appName: ${appName}, visible: ${visible}`);
-    }
-  }, [appName, visible]);
-
-  useEffect(() => {
-    if (!maxDuration || !visible) return;
-
-    const timer = setTimeout(() => {
-      if (__DEV__) {
-        console.log(`[SplashScreen] Timeout reached: ${maxDuration}ms`);
-      }
-      setTimedOut(true);
-      onTimeout?.();
-    }, maxDuration);
-
-    return () => clearTimeout(timer);
-  }, [maxDuration, visible, onTimeout]);
-
-  if (!visible) {
-    if (__DEV__) console.log("[SplashScreen] Not visible, returning null");
-    return null;
-  }
-
-  const content = (
-    <View
-      style={[
-        styles.content,
-        {
-          paddingTop: insets.top + tokens.spacing.xl,
-          paddingBottom: insets.bottom + tokens.spacing.xl,
-        },
-      ]}
-    >
-      <View style={styles.center}>
-        {icon ? (
-          <Image source={icon} style={styles.icon} resizeMode="contain" />
-        ) : (
-          <View
-            style={[
-              styles.iconPlaceholder,
-              { backgroundColor: colors.iconPlaceholderBg },
-            ]}
-          />
-        )}
-
-        {appName ? (
-          <AtomicText
-            type="displaySmall"
-            style={[
-              styles.title,
-              {
-                color: colors.textColor,
-                marginBottom: tokens.spacing.sm,
-              },
-            ]}
-          >
-            {appName}
-          </AtomicText>
-        ) : null}
-
-        {tagline ? (
-          <AtomicText
-            type="bodyLarge"
-            style={[
-              styles.subtitle,
-              {
-                color: colors.textColor,
-                opacity: 0.9,
-              },
-            ]}
-          >
-            {tagline}
-          </AtomicText>
-        ) : null}
-
-        {timedOut && __DEV__ ? (
-          <AtomicText
-            type="labelSmall"
-            style={[
-              styles.timeoutWarning,
-              {
-                color: colors.textColor,
-                marginTop: tokens.spacing.md,
-              },
-            ]}
-          >
-            ⚠️ Initialization timeout
-          </AtomicText>
-        ) : null}
-      </View>
-    </View>
-  );
-
-  if (gradientColors && gradientColors.length >= 2) {
-    return (
-      <LinearGradient
-        colors={gradientColors as [string, string, ...string[]]}
-        style={styles.container}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 0, y: 1 }}
-      >
-        {content}
-      </LinearGradient>
-    );
-  }
-
-  return (
-    <View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-      {content}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    justifyContent: "space-between",
-  },
-  center: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: 24,
-  },
-  icon: {
-    width: 120,
-    height: 120,
-    marginBottom: 24,
-  },
-  iconPlaceholder: {
-    width: 100,
-    height: 100,
-    borderRadius: 50,
-    marginBottom: 24,
-  },
-  title: {
-    textAlign: "center",
-    fontWeight: "800",
-  },
-  subtitle: {
-    textAlign: "center",
-  },
-  timeoutWarning: {
-    textAlign: "center",
-  },
-});

package/src/presentation/providers/SplashThemeProvider.tsx

@@ -1,63 +0,0 @@
-/**
- * Splash Theme Provider
- * Centralized theme management for splash screen
- * Follows provider pattern like onboarding package
- */
-
-import React, { createContext, useContext, useMemo } from "react";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-interface SplashColors {
-  backgroundColor: string;
-  textColor: string;
-  iconPlaceholderBg: string;
-}
-
-interface SplashThemeValue {
-  colors: SplashColors;
-  gradientColors?: readonly [string, string, ...string[]];
-}
-
-const SplashTheme = createContext<SplashThemeValue | null>(null);
-
-export interface SplashThemeProviderProps {
-  children: React.ReactNode;
-  gradientColors?: readonly [string, string, ...string[]];
-  customColors?: Partial<SplashColors>;
-}
-
-export const SplashThemeProvider = ({
-  children,
-  gradientColors,
-  customColors,
-}: SplashThemeProviderProps) => {
-  const tokens = useAppDesignTokens();
-
-  const colors = useMemo<SplashColors>(() => {
-    const defaults: SplashColors = {
-      backgroundColor: tokens.colors.primary,
-      textColor: tokens.colors.onPrimary,
-      iconPlaceholderBg: tokens.colors.onPrimary + "30",
-    };
-
-    return {
-      ...defaults,
-      ...customColors,
-    };
-  }, [tokens, customColors]);
-
-  const value = useMemo(
-    () => ({ colors, gradientColors }),
-    [colors, gradientColors]
-  );
-
-  return <SplashTheme.Provider value={value}>{children}</SplashTheme.Provider>;
-};
-
-export const useSplashTheme = (): SplashThemeValue => {
-  const theme = useContext(SplashTheme);
-  if (!theme) {
-    throw new Error("useSplashTheme must be used within SplashThemeProvider");
-  }
-  return theme;
-};