@umituz/react-native-splash 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,107 @@
+# @umituz/react-native-splash
+
+Generic splash screen for React Native apps with animations, gradients, and customizable branding. Follows SOLID, DRY, KISS principles - fully reusable across hundreds of apps.
+
+## Features
+
+- ✅ **Generic & Reusable**: Works with any app, fully customizable via props
+- ✅ **Animations**: Smooth fade, scale, and slide animations
+- ✅ **Gradient Backgrounds**: Support for gradient or solid colors
+- ✅ **Customizable Branding**: Logo, app name, tagline, footer
+- ✅ **Loading Indicators**: Progress bar and loading text
+- ✅ **SOLID Principles**: Clean architecture, easy to extend
+- ✅ **DRY**: No code duplication, generic components
+- ✅ **KISS**: Simple API, easy to understand and use
+- ✅ **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
+  }}
+/>
+```
+
+### Advanced Example
+
+```typescript
+<SplashScreen
+  appName="My App"
+  tagline="Your tagline here"
+  logo="Sparkles"
+  backgroundColor="#3B82F6"
+  gradientColors={['#3B82F6', '#8B5CF6']}
+  loadingText="Loading..."
+  showLoading={true}
+  showProgressBar={true}
+  footerText="Powered by"
+  versionText="v1.0.0"
+  animationDuration={2000}
+  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;
+  gradientColors?: string[];
+  loadingText?: string;
+  showLoading?: boolean;
+  showProgressBar?: boolean;
+  footerText?: string;
+  versionText?: string;
+  animationDuration?: number;
+  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
+

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@umituz/react-native-splash",
+  "version": "1.0.0",
+  "description": "Generic splash screen for React Native apps with animations, gradients, and customizable branding. SOLID, DRY, KISS principles applied.",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
+  "keywords": [
+    "react-native",
+    "splash",
+    "splash-screen",
+    "loading",
+    "animation",
+    "gradient",
+    "ddd",
+    "domain-driven-design",
+    "solid",
+    "dry",
+    "kiss"
+  ],
+  "author": "Ümit UZ <umit@umituz.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umituz/react-native-splash"
+  },
+  "peerDependencies": {
+    "@umituz/react-native-theme": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
+    "react-native-safe-area-context": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-native": "^0.73.0",
+    "@umituz/react-native-theme": "latest",
+    "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-design-system": "latest",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "react-native-safe-area-context": "^5.6.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}
+

package/src/domain/entities/SplashOptions.ts

@@ -0,0 +1,82 @@
+/**
+ * Splash Options
+ *
+ * Configuration options for splash screen
+ */
+
+import { ReactNode } from "react";
+
+/**
+ * Splash Options
+ * Customize the splash screen experience
+ */
+export interface SplashOptions {
+  /**
+   * App name to display
+   */
+  appName?: string;
+
+  /**
+   * Tagline or subtitle
+   */
+  tagline?: string;
+
+  /**
+   * Logo/icon component or name
+   */
+  logo?: ReactNode | string;
+
+  /**
+   * Background color or gradient colors
+   */
+  backgroundColor?: string;
+  gradientColors?: string[];
+
+  /**
+   * Loading text
+   */
+  loadingText?: string;
+
+  /**
+   * Show loading indicator (default: true)
+   */
+  showLoading?: boolean;
+
+  /**
+   * Show progress bar (default: true)
+   */
+  showProgressBar?: boolean;
+
+  /**
+   * Footer text (e.g., "Powered by...")
+   */
+  footerText?: string;
+
+  /**
+   * Version text
+   */
+  versionText?: string;
+
+  /**
+   * Animation duration in milliseconds (default: 2000)
+   */
+  animationDuration?: number;
+
+  /**
+   * Minimum display time in milliseconds (default: 1500)
+   */
+  minimumDisplayTime?: number;
+
+  /**
+   * Callback when splash is ready to hide
+   */
+  onReady?: () => void | Promise<void>;
+
+  /**
+   * Custom render functions
+   */
+  renderLogo?: () => ReactNode;
+  renderContent?: () => ReactNode;
+  renderFooter?: () => ReactNode;
+}
+

package/src/index.ts

@@ -0,0 +1,29 @@
+/**
+ * React Native Splash - Public API
+ *
+ * Generic splash screen for React Native apps with animations, gradients,
+ * and customizable branding. Follows SOLID, DRY, KISS principles.
+ *
+ * Usage:
+ *   import { SplashScreen } from '@umituz/react-native-splash';
+ *
+ *   <SplashScreen
+ *     appName="My App"
+ *     tagline="Your tagline here"
+ *     logo="Sparkles"
+ *     onReady={() => console.log('Ready')}
+ *   />
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type { SplashOptions } from "./domain/entities/SplashOptions";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { SplashScreen, type SplashScreenProps } from "./presentation/components/SplashScreen";
+

package/src/presentation/components/SplashScreen.tsx

@@ -0,0 +1,322 @@
+/**
+ * Splash Screen Component
+ *
+ * Generic splash screen with animations, gradients, and customizable branding
+ */
+
+import React, { useEffect, useRef, useMemo } from "react";
+import { View, StyleSheet, Animated } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-theme";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useResponsive, AtomicIcon, AtomicText, STATIC_TOKENS, withAlpha } from "@umituz/react-native-design-system";
+import type { SplashOptions } from "../../domain/entities/SplashOptions";
+
+export interface SplashScreenProps extends SplashOptions {
+  /**
+   * Whether splash is visible
+   */
+  visible?: boolean;
+}
+
+/**
+ * Splash Screen Component
+ */
+export const SplashScreen: React.FC<SplashScreenProps> = ({
+  appName,
+  tagline,
+  logo,
+  backgroundColor,
+  gradientColors,
+  loadingText,
+  showLoading = true,
+  showProgressBar = true,
+  footerText,
+  versionText,
+  animationDuration = 2000,
+  minimumDisplayTime = 1500,
+  onReady,
+  renderLogo,
+  renderContent,
+  renderFooter,
+  visible = true,
+}) => {
+  const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
+  const insets = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const styles = useMemo(
+    () => getStyles(tokens, responsive, insets, backgroundColor, gradientColors),
+    [tokens, responsive, insets, backgroundColor, gradientColors],
+  );
+
+  // Animation values
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const scaleAnim = useRef(new Animated.Value(0.8)).current;
+  const slideAnim = useRef(new Animated.Value(50)).current;
+
+  /**
+   * Initialize animations
+   */
+  useEffect(() => {
+    if (!visible) return;
+
+    // Start entrance animations
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 1000,
+        useNativeDriver: true,
+      }),
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        tension: 100,
+        friction: 8,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 800,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    // Call onReady after minimum display time
+    const timer = setTimeout(() => {
+      if (onReady) {
+        onReady();
+      }
+    }, Math.max(minimumDisplayTime, animationDuration));
+
+    return () => clearTimeout(timer);
+  }, [visible, fadeAnim, scaleAnim, slideAnim, minimumDisplayTime, animationDuration, onReady]);
+
+  if (!visible) return null;
+
+  const displayAppName = appName || t("branding.appName", "App Name");
+  const displayTagline = tagline || t("branding.tagline", "Your tagline here");
+  const displayLoadingText = loadingText || t("general.loading", "Loading...");
+  const displayFooterText = footerText || t("branding.poweredBy", "Powered by");
+  const displayVersionText = versionText;
+
+  return (
+    <View style={styles.container}>
+      {/* Background Gradient Effect */}
+      {gradientColors && gradientColors.length > 0 ? (
+        <View style={[styles.backgroundGradient, { backgroundColor: gradientColors[0] }]} />
+      ) : (
+        <View style={[styles.backgroundGradient, { backgroundColor: backgroundColor || tokens.colors.primary }]} />
+      )}
+
+      {/* Main Content */}
+      <Animated.View
+        style={[
+          styles.content,
+          {
+            opacity: fadeAnim,
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      >
+        {renderLogo ? (
+          renderLogo()
+        ) : (
+          <View style={styles.logoContainer}>
+            <Animated.View
+              style={[
+                styles.logoBackground,
+                {
+                  transform: [{ scale: scaleAnim }],
+                },
+              ]}
+            >
+              {typeof logo === "string" ? (
+                <AtomicIcon name={logo || "Sparkles"} size="xl" color="primary" />
+              ) : logo ? (
+                logo
+              ) : (
+                <AtomicIcon name="Sparkles" size="xl" color="primary" />
+              )}
+            </Animated.View>
+          </View>
+        )}
+
+        {renderContent ? (
+          renderContent()
+        ) : (
+          <Animated.View
+            style={[
+              styles.textContainer,
+              {
+                opacity: fadeAnim,
+                transform: [{ translateY: slideAnim }],
+              },
+            ]}
+          >
+            <AtomicText style={styles.appName}>{displayAppName}</AtomicText>
+            <AtomicText style={styles.tagline}>{displayTagline}</AtomicText>
+          </Animated.View>
+        )}
+      </Animated.View>
+
+      {/* Loading Indicator */}
+      {showLoading && (
+        <Animated.View
+          style={[
+            styles.loadingContainer,
+            {
+              opacity: fadeAnim,
+            },
+          ]}
+        >
+          {showProgressBar && (
+            <View style={styles.loadingBar}>
+              <Animated.View
+                style={[
+                  styles.loadingProgress,
+                  {
+                    transform: [{ scaleX: scaleAnim }],
+                  },
+                ]}
+              />
+            </View>
+          )}
+          <AtomicText style={styles.loadingText}>{displayLoadingText}</AtomicText>
+        </Animated.View>
+      )}
+
+      {/* Footer */}
+      {renderFooter ? (
+        renderFooter()
+      ) : (
+        <Animated.View
+          style={[
+            styles.footer,
+            {
+              opacity: fadeAnim,
+            },
+          ]}
+        >
+          {displayFooterText && (
+            <AtomicText style={styles.footerText}>{displayFooterText}</AtomicText>
+          )}
+          {displayVersionText && (
+            <AtomicText style={styles.versionText}>{displayVersionText}</AtomicText>
+          )}
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+const getStyles = (
+  tokens: ReturnType<typeof useAppDesignTokens>,
+  responsive: ReturnType<typeof useResponsive>,
+  insets: { top: number; bottom: number },
+  backgroundColor?: string,
+  gradientColors?: string[],
+) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: backgroundColor || tokens.colors.primary,
+      paddingHorizontal: responsive.horizontalPadding,
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+    },
+    backgroundGradient: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      opacity: 0.9,
+    },
+    content: {
+      flex: 3,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingHorizontal: tokens.spacing.lg,
+    },
+    logoContainer: {
+      marginBottom: tokens.spacing.xxl * 2,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    logoBackground: {
+      width: responsive.logoSize,
+      height: responsive.logoSize,
+      borderRadius: STATIC_TOKENS.borders.radius.full,
+      backgroundColor: tokens.colors.surface,
+      alignItems: "center",
+      justifyContent: "center",
+      padding: STATIC_TOKENS.spacing.md,
+    },
+    textContainer: {
+      alignItems: "center",
+      marginBottom: tokens.spacing.xxl * 2,
+    },
+    appName: {
+      ...STATIC_TOKENS.typography.headingLarge,
+      color: tokens.colors.textInverse,
+      textAlign: "center",
+      marginBottom: tokens.spacing.md,
+      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.headingLarge.fontSize ?? 32),
+      fontWeight: STATIC_TOKENS.typography.bold,
+    },
+    tagline: {
+      ...STATIC_TOKENS.typography.bodyLarge,
+      color: tokens.colors.textInverse,
+      textAlign: "center",
+      opacity: 0.9,
+      maxWidth: responsive.maxContentWidth,
+      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.bodyLarge.fontSize ?? 18),
+    },
+    loadingContainer: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      width: responsive.maxContentWidth,
+      alignSelf: "center",
+    },
+    loadingBar: {
+      width: "100%",
+      height: 4,
+      backgroundColor: withAlpha(tokens.colors.textInverse, 0.3),
+      borderRadius: STATIC_TOKENS.borders.radius.xs,
+      marginBottom: tokens.spacing.md,
+      overflow: "hidden",
+    },
+    loadingProgress: {
+      width: "100%",
+      height: "100%",
+      backgroundColor: tokens.colors.textInverse,
+      borderRadius: STATIC_TOKENS.borders.radius.xs,
+    },
+    loadingText: {
+      ...STATIC_TOKENS.typography.bodyMedium,
+      color: tokens.colors.textInverse,
+      opacity: 0.8,
+      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.bodyMedium.fontSize ?? 16),
+    },
+    footer: {
+      flex: 0.5,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      paddingBottom: tokens.spacing.md,
+    },
+    footerText: {
+      ...STATIC_TOKENS.typography.caption,
+      color: tokens.colors.textInverse,
+      opacity: 0.7,
+      marginBottom: tokens.spacing.xs,
+      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.caption.fontSize ?? 12),
+    },
+    versionText: {
+      ...STATIC_TOKENS.typography.caption,
+      color: tokens.colors.textInverse,
+      opacity: 0.5,
+      fontSize: responsive.getFontSize(STATIC_TOKENS.typography.caption.fontSize ?? 12),
+    },
+  });
+