@umituz/react-native-splash 2.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-splash",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Ultra minimal splash screen for React Native apps. Just icon, name, and tagline.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -22,6 +22,7 @@
     "url": "https://github.com/umituz/react-native-splash"
   },
   "peerDependencies": {
+    "expo-linear-gradient": ">=14.0.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -43,4 +44,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/domain/entities/SplashOptions.ts

@@ -17,6 +17,9 @@ export interface SplashOptions {
   /** Background color (default: #6366F1) */
   backgroundColor?: string;
 
+  /** Gradient colors - if provided, overrides backgroundColor */
+  gradientColors?: readonly [string, string, ...string[]];
+
   /** Text color (default: #FFFFFF) */
   textColor?: string;
 

package/src/presentation/components/SplashScreen.tsx

@@ -7,6 +7,7 @@
 
 import React from "react";
 import { View, Text, Image, StyleSheet, ActivityIndicator } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import type { SplashOptions } from "../../domain/entities/SplashOptions";
 
@@ -23,39 +24,67 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   appName = "",
   tagline = "",
   backgroundColor = DEFAULT_BG,
+  gradientColors,
   textColor = DEFAULT_TEXT,
   showLoading = true,
   visible = true,
 }) => {
   const insets = useSafeAreaInsets();
 
-  if (!visible) return null;
+  React.useEffect(() => {
+    if (__DEV__) {
+      console.log(`[SplashScreen] Mounted - appName: ${appName}, visible: ${visible}`);
+    }
+  }, [appName, visible]);
 
-  return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <View style={[styles.content, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-        <View style={styles.center}>
-          {icon ? (
-            <Image source={icon} style={styles.icon} resizeMode="contain" />
-          ) : (
-            <View style={styles.iconPlaceholder} />
-          )}
+  if (!visible) {
+    if (__DEV__) console.log('[SplashScreen] Not visible, returning null');
+    return null;
+  }
 
-          {appName ? (
-            <Text style={[styles.title, { color: textColor }]}>{appName}</Text>
-          ) : null}
+  const content = (
+    <View style={[styles.content, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+      <View style={styles.center}>
+        {icon ? (
+          <Image source={icon} style={styles.icon} resizeMode="contain" />
+        ) : (
+          <View style={styles.iconPlaceholder} />
+        )}
 
-          {tagline ? (
-            <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text>
-          ) : null}
-        </View>
+        {appName ? (
+          <Text style={[styles.title, { color: textColor }]}>{appName}</Text>
+        ) : null}
 
-        {showLoading ? (
-          <View style={styles.loading}>
-            <ActivityIndicator color={textColor} size="small" />
-          </View>
+        {tagline ? (
+          <Text style={[styles.subtitle, { color: textColor }]}>{tagline}</Text>
         ) : null}
       </View>
+
+      {showLoading ? (
+        <View style={styles.loading}>
+          <ActivityIndicator color={textColor} size="small" />
+        </View>
+      ) : null}
+    </View>
+  );
+
+  // Use gradient if colors provided, otherwise solid background
+  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 }]}>
+      {content}
     </View>
   );
 };