React Native Splash Screen Generator

A powerful and flexible splash screen generator and controller for React Native applications. This package provides both splash screen generation capabilities and programmatic control over the splash screen display.

Features

• 🎨 Automatic splash screen generation for iOS and Android
• 🌓 Dark mode support
• 🎯 Precise splash screen timing control
• 📱 Native implementation for optimal performance
• ⚡ Simple API for splash screen management
• 🛠 Customizable splash screen attributes
• 🎭 Multiple splash screen styles support
• 📐 Automatic image resizing for all required dimensions

Installation

npm install @teknyo/react-native-splash-generator
# or
yarn add @teknyo/react-native-splash-generator

iOS Setup

Add the following to your ios/Podfile:

pod 'react-native-splash-screen', :path => '../node_modules/@teknyo/react-native-splash-generator'

Then run:

cd ios && pod install

Android Setup

No additional setup required for Android.

Usage

Generating Splash Screens

1. Create a splash screen configuration file react-native-splash.yaml:

splash:
  image: ./assets/splash.png
  backgroundColor: '#FFFFFF'
  darkMode:
    image: ./assets/splash-dark.png
    backgroundColor: '#000000'
  resizeMode: 'contain'
  android12:
    enabled: true

2. Generate splash screens:

npx generate-splashes

Controlling Splash Screen

import { SplashScreen } from '@teknyo/react-native-splash-generator';

// In your App.tsx or App.jsx
useEffect(() => {
  // Keep splash screen visible during initialization
  SplashScreen.preserve();

  // Your initialization code here
  await initializeApp();

  // Hide splash screen when ready
  SplashScreen.remove();
}, []);

API Reference

SplashScreen

The main API for controlling the splash screen.

Methods

• preserve(): Keeps the splash screen visible
• remove(): Removes the splash screen
• show(): Shows the splash screen again (useful for transitions)

Configuration Options

The react-native-splash.yaml configuration file supports the following options:

splash:
  # Basic Configuration
  image: string # Path to splash image
  backgroundColor: string # Background color (hex)
  resizeMode: string # "contain" | "cover" | "center"

  # Dark Mode Support
  darkMode:
    image: string # Dark mode splash image
    backgroundColor: string # Dark mode background color

  # Platform Specific
  android12:
    enabled: boolean # Enable Android 12+ splash screen
    image: string # Optional: specific image for Android 12+
    darkImage: string # Optional: dark mode image for Android 12+

  ios:
    storyboard: boolean # Use storyboard-based launch screen

Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License

This project is licensed under the MIT License - see the LICENSE file for details.