@umituz/react-native-splash 2.1.3 → 2.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "2.1.3",
-  "description": "Ultra minimal splash screen for React Native apps. Just icon, name, and tagline.",
+  "version": "2.1.5",
+  "description": "Ultra minimal splash screen for React Native apps with design system integration and theme provider pattern.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
@@ -16,7 +16,9 @@
     "splash",
     "splash-screen",
     "loading",
-    "minimal"
+    "minimal",
+    "design-system",
+    "theme-provider"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -25,16 +27,21 @@
     "url": "https://github.com/umituz/react-native-splash"
   },
   "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",
     "react": "19.1.0",
     "react-native": "0.81.5",
+    "react-native-safe-area-context": "^5.6.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/domain/entities/SplashOptions.ts

@@ -1,5 +1,6 @@
 /**
  * Splash Options - Ultra Minimal Configuration
+ * Theme/colors managed by SplashThemeProvider
  */
 
 import type { ImageSourcePropType } from "react-native";
@@ -13,16 +14,4 @@ export interface SplashOptions {
 
   /** Tagline or subtitle */
   tagline?: string;
-
-  /** Background color (default: #6366F1) */
-  backgroundColor?: string;
-
-  /** Gradient colors - if provided, overrides backgroundColor */
-  gradientColors?: readonly [string, string, ...string[]];
-
-  /** Text color (default: #FFFFFF) */
-  textColor?: string;
-
-  /** Show loading indicator (default: true) */
-  showLoading?: boolean;
 }

package/src/index.ts

@@ -2,30 +2,27 @@
  * React Native Splash - Public API
  *
  * Ultra minimal splash screen for React Native apps.
- * Just displays icon, app name, and tagline.
- * Parent component controls visibility and timing.
+ * Centralized theme management with provider pattern.
  *
  * Usage:
- *   import { SplashScreen } from '@umituz/react-native-splash';
+ *   import { SplashThemeProvider, SplashScreen } from '@umituz/react-native-splash';
  *
- *   // In your app:
- *   const [showSplash, setShowSplash] = useState(true);
- *
- *   useEffect(() => {
- *     // Your initialization logic
- *     initializeApp().then(() => setShowSplash(false));
- *   }, []);
- *
- *   if (showSplash) {
- *     return (
- *       <SplashScreen
- *         icon={require('./assets/icon.png')}
- *         appName="My App"
- *         tagline="Your tagline here"
- *       />
- *     );
- *   }
+ *   <SplashThemeProvider gradientColors={['#FF0080', '#7928CA']}>
+ *     <SplashScreen
+ *       icon={require('./assets/icon.png')}
+ *       appName="My App"
+ *       tagline="Your tagline here"
+ *       visible={showSplash}
+ *       maxDuration={10000}
+ *       onTimeout={() => console.warn('Splash timeout')}
+ *     />
+ *   </SplashThemeProvider>
  */
 
 export type { SplashOptions } from "./domain/entities/SplashOptions";
 export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
+export {
+  SplashThemeProvider,
+  type SplashThemeProviderProps,
+  useSplashTheme,
+} from "./presentation/providers/SplashThemeProvider";

package/src/presentation/components/SplashScreen.tsx

@@ -1,74 +1,131 @@
 /**
  * Splash Screen Component
- *
- * Ultra minimal splash screen - just displays icon, name, and tagline.
- * Parent component controls visibility and timing.
+ * Ultra minimal splash screen with design system integration
+ * Parent component controls visibility and timing
  */
 
-import React from "react";
-import { View, Text, Image, StyleSheet, ActivityIndicator } from "react-native";
+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 {
-  /** Control visibility from parent */
   visible?: boolean;
+  maxDuration?: number;
+  onTimeout?: () => void;
 }
 
-const DEFAULT_BG = "#6366F1";
-const DEFAULT_TEXT = "#FFFFFF";
-
 export const SplashScreen: React.FC<SplashScreenProps> = ({
   icon,
   appName = "",
   tagline = "",
-  backgroundColor = DEFAULT_BG,
-  gradientColors,
-  textColor = DEFAULT_TEXT,
-  showLoading = true,
   visible = true,
+  maxDuration,
+  onTimeout,
 }) => {
   const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
+  const { colors, gradientColors } = useSplashTheme();
+  const [timedOut, setTimedOut] = useState(false);
 
-  React.useEffect(() => {
+  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');
+    if (__DEV__) console.log("[SplashScreen] Not visible, returning null");
     return null;
   }
 
   const content = (
-    <View style={[styles.content, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+    <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} />
+          <View
+            style={[
+              styles.iconPlaceholder,
+              { backgroundColor: colors.iconPlaceholderBg },
+            ]}
+          />
         )}
 
         {appName ? (
-          <Text style={[styles.title, { color: textColor }]}>{appName}</Text>
+          <AtomicText
+            type="displaySmall"
+            style={[
+              styles.title,
+              {
+                color: colors.textColor,
+                marginBottom: tokens.spacing.sm,
+              },
+            ]}
+          >
+            {appName}
+          </AtomicText>
         ) : null}
 
         {tagline ? (
-          <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text>
+          <AtomicText
+            type="bodyLarge"
+            style={[
+              styles.subtitle,
+              {
+                color: colors.textColor,
+                opacity: 0.9,
+              },
+            ]}
+          >
+            {tagline}
+          </AtomicText>
         ) : null}
-      </View>
 
-      {showLoading ? (
-        <View style={styles.loading}>
-          <ActivityIndicator color={textColor} size="small" />
-        </View>
-      ) : null}
+        {timedOut && __DEV__ ? (
+          <AtomicText
+            type="labelSmall"
+            style={[
+              styles.timeoutWarning,
+              {
+                color: colors.textColor,
+                marginTop: tokens.spacing.md,
+              },
+            ]}
+          >
+            ⚠️ Initialization timeout
+          </AtomicText>
+        ) : null}
+      </View>
     </View>
   );
 
-  // Use gradient if colors provided, otherwise solid background
   if (gradientColors && gradientColors.length >= 2) {
     return (
       <LinearGradient
@@ -83,7 +140,7 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   }
 
   return (
-    <View style={[styles.container, { backgroundColor }]}>
+    <View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
       {content}
     </View>
   );
@@ -112,22 +169,16 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
     borderRadius: 50,
-    backgroundColor: "rgba(255,255,255,0.2)",
     marginBottom: 24,
   },
   title: {
-    fontSize: 32,
-    fontWeight: "700",
     textAlign: "center",
-    marginBottom: 8,
+    fontWeight: "800",
   },
   subtitle: {
-    fontSize: 16,
     textAlign: "center",
-    opacity: 0.9,
   },
-  loading: {
-    alignItems: "center",
-    paddingBottom: 48,
+  timeoutWarning: {
+    textAlign: "center",
   },
 });

package/src/presentation/providers/SplashThemeProvider.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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;
+};

package/LICENSE

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Ümit UZ
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

package/README.md

@@ -1,93 +0,0 @@
-# @umituz/react-native-splash
-
-Simple splash screen for React Native apps with logo, app name, and loading indicator. Minimal dependencies, no over-engineering.
-
-## Features
-
-- ✅ **Simple & Lightweight**: No animations, no gradients, just the essentials
-- ✅ **Minimal Dependencies**: Only requires AtomicIcon and localization
-- ✅ **Customizable**: Logo, app name, tagline, background color
-- ✅ **Loading Indicator**: Built-in ActivityIndicator
-- ✅ **Type-Safe**: Full TypeScript support
-
-## Installation
-
-```bash
-npm install @umituz/react-native-splash
-```
-
-## Usage
-
-### Basic Example
-
-```typescript
-import { SplashScreen } from '@umituz/react-native-splash';
-
-<SplashScreen
-  appName="My App"
-  tagline="Your tagline here"
-  logo="Sparkles"
-  onReady={() => {
-    // Navigate to main app
-  }}
-/>
-```
-
-### With Custom Background
-
-```typescript
-<SplashScreen
-  appName="My App"
-  tagline="Your tagline here"
-  logo="Sparkles"
-  backgroundColor="#3B82F6"
-  loadingText="Loading..."
-  showLoading={true}
-  minimumDisplayTime={1500}
-  onReady={handleReady}
-/>
-```
-
-### Custom Render Functions
-
-```typescript
-<SplashScreen
-  appName="My App"
-  renderLogo={() => <CustomLogo />}
-  renderContent={() => <CustomContent />}
-  renderFooter={() => <CustomFooter />}
-  onReady={handleReady}
-/>
-```
-
-## API Reference
-
-### `SplashOptions`
-
-```typescript
-interface SplashOptions {
-  appName?: string;
-  tagline?: string;
-  logo?: ReactNode | string;
-  backgroundColor?: string;
-  loadingText?: string;
-  showLoading?: boolean;
-  minimumDisplayTime?: number;
-  onReady?: () => void | Promise<void>;
-  renderLogo?: () => ReactNode;
-  renderContent?: () => ReactNode;
-  renderFooter?: () => ReactNode;
-}
-```
-
-## Architecture
-
-- **Domain Layer**: Entities and interfaces (business logic)
-- **Presentation Layer**: Components (UI)
-
-No app-specific code, fully generic and reusable.
-
-## License
-
-MIT
-