react-native-custom-splash 1.0.3 → 2.0.0

package/README.md

@@ -1,20 +1,18 @@
-# react-native-custom-splash
+# react-native-custom-splash 🎨
 
-A custom splash screen module for React Native with native iOS and Android support, fully compatible with Expo.
+A powerful and easy-to-use custom splash screen module for React Native with native iOS and Android support, **fully compatible with Expo**!
 
-## Features
+## ✨ Features
 
-- ✅ **Native iOS & Android** splash screens
-- ✅ **Expo compatible** with config plugin
-- ✅ **Customizable** splash images
-- ✅ **Animated transitions** for smooth hiding
-- ✅ **TypeScript** support
-- ✅ **Auto-show** on app launch
-- ✅ **Manual control** with show/hide methods
+- 🚀 **Zero Native Code Required** - Just configure in `app.json`
+- 🎨 **Auto Image Setup** - Automatically copies images from your project to native folders
+- 🖼️ **Background + Logo Support** - Add a full background image and/or center logo
+- 🎨 **Customizable Colors** - Set your brand's background color
+- 📱 **Native Performance** - Pure native implementation for both iOS and Android
+- ⚡ **Expo Compatible** - Works seamlessly with Expo managed workflow
+- 🔄 **Simple API** - Easy show/hide methods with animation support
 
-## Installation
-
-### For Expo Projects
+## 📦 Installation
 
 ```bash
 npm install react-native-custom-splash
@@ -22,257 +20,312 @@ npm install react-native-custom-splash
 yarn add react-native-custom-splash
 ```
 
-Add the plugin to your `app.json` or `app.config.js`:
+## 🎯 Quick Start (The Easy Way!)
+
+### Step 1: Add your images to your project
+
+Create an `assets` folder in your project root and add your images:
+
+```
+your-project/
+├── assets/
+│   ├── splash-background.png  (your full background image - optional)
+│   └── logo.png               (your center logo - optional)
+├── app.json
+└── ...
+```
+
+### Step 2: Configure in app.json
+
+Add the plugin configuration to your `app.json`:
 
 ```json
 {
   "expo": {
+    "name": "YourApp",
     "plugins": [
-      "react-native-custom-splash"
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#FFFFFF",
+          "image": "./assets/splash-background.png",
+          "logo": "./assets/logo.png",
+          "logoWidth": 150
+        }
+      ]
     ]
   }
 }
 ```
 
-Then run prebuild:
+### Step 3: Run prebuild
 
 ```bash
-npx expo prebuild
+npx expo prebuild --clean
 ```
 
-### For Bare React Native Projects
+**That's it!** 🎉 The plugin will automatically:
+- ✅ Copy your images to iOS and Android native folders
+- ✅ Configure the native splash screen
+- ✅ Set up all the required files
+- ✅ Handle different screen densities
 
-```bash
-npm install react-native-custom-splash
-# or
-yarn add react-native-custom-splash
-```
+### Step 4: Use in your app
 
-#### iOS Setup
+```javascript
+import SplashScreen from 'react-native-custom-splash';
+import React, { useEffect } from 'react';
 
-1. Install pods:
-```bash
-cd ios && pod install && cd ..
-```
+function App() {
+  useEffect(() => {
+    // Hide splash screen after app loads
+    setTimeout(() => {
+      SplashScreen.hide(true); // true = animated
+    }, 2000);
+  }, []);
 
-2. The module will be automatically linked.
+  return (
+    // Your app content
+  );
+}
+```
 
-#### Android Setup
+## ⚙️ Configuration Options
 
-1. Add the package to your `MainApplication.kt`:
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `backgroundColor` | `string` | `#FFFFFF` | Background color for the splash screen (hex color) |
+| `image` | `string` | `null` | Path to full background image (relative to project root) |
+| `logo` | `string` | `null` | Path to center logo image (relative to project root) |
+| `logoWidth` | `number` | `150` | Width of the center logo in pixels |
 
-```kotlin
-import com.rncustomsplash.SplashScreenPackage
+### Configuration Examples
 
-// In getPackages() method:
-packages.add(SplashScreenPackage())
+#### Only Background Color
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#FF6B6B"
+      }
+    ]
+  ]
+}
 ```
 
-2. Show splash in `MainActivity.kt`:
-
-```kotlin
-import com.rncustomsplash.SplashScreenModule
-
-override fun onCreate(savedInstanceState: Bundle?) {
-    SplashScreenModule.show(this)
-    super.onCreate(savedInstanceState)
+#### Background Color + Logo
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#1E3A8A",
+        "logo": "./assets/logo.png",
+        "logoWidth": 200
+      }
+    ]
+  ]
 }
 ```
 
-## Adding Custom Splash Images
-
-### iOS
-
-Add your splash image to your Xcode project:
-1. Open your project in Xcode
-2. Add an image asset named `splash` to your Assets catalog
-3. Or add a `splash.png` file to your project
-
-### Android
-
-Add your splash image to Android resources:
-1. Add `splash.png` (or `splash.jpg`) to `android/app/src/main/res/drawable/`
-2. Or create a drawable resource named `splash`
-
-You can also customize the background color in `android/app/src/main/res/values/colors.xml`:
-
-```xml
-<color name="splash_background">#FFFFFF</color>
+#### Full Background Image + Logo
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#FFFFFF",
+        "image": "./assets/splash-bg.png",
+        "logo": "./assets/logo.png",
+        "logoWidth": 180
+      }
+    ]
+  ]
+}
 ```
 
-## Usage
-
-```typescript
-import SplashScreen from 'react-native-custom-splash';
-import { useEffect } from 'react';
-
-function App() {
-  useEffect(() => {
-    // Hide splash screen after app is ready
-    // The splash screen shows automatically on launch
-    
-    // Simple hide (instant)
-    SplashScreen.hide(false);
-    
-    // Or with animation
-    SplashScreen.hide(true);
-    
-    // You can also show it again
-    // SplashScreen.show();
-  }, []);
-
-  return (
-    // Your app content
-  );
+#### Only Background Image (No Logo)
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#000000",
+        "image": "./assets/splash-full.png"
+      }
+    ]
+  ]
 }
 ```
 
-## Example Project
+## 📱 API Reference
 
-A complete working example is included in the `example/` directory. It demonstrates:
+### `SplashScreen.hide(animated)`
 
-- ✅ Automatic splash screen on launch
-- ✅ Loading progress simulation
-- ✅ Animated hide transitions
-- ✅ Manual show/hide controls
-- ✅ Full TypeScript integration
+Hides the splash screen.
 
-### Run the Example
+**Parameters:**
+- `animated` (boolean): Whether to animate the hide transition. Default: `true`
 
-```bash
-cd example
-npm install
-npx expo prebuild
-npm run ios  # or npm run android
-```
+**Returns:** Promise<boolean>
 
-See [example/README.md](./example/README.md) for detailed instructions.
+**Example:**
+```javascript
+// With animation (recommended)
+await SplashScreen.hide(true);
 
-## API Reference
+// Without animation
+await SplashScreen.hide(false);
+```
 
 ### `SplashScreen.show()`
 
-Shows the splash screen.
+Shows the splash screen (usually not needed as it shows automatically on app launch).
 
-```typescript
+**Example:**
+```javascript
 SplashScreen.show();
 ```
 
-### `SplashScreen.hide(animated?)`
+## 🎨 Image Guidelines
 
-Hides the splash screen.
+### Background Image
+- **Recommended size:** 1242 x 2688 px (iPhone 13 Pro Max size)
+- **Format:** PNG or JPG
+- **Aspect ratio:** Match your target device screens
+- **Tip:** The plugin will handle different screen densities automatically
 
-**Parameters:**
-- `animated` (boolean, optional): Whether to animate the hide transition. Default: `false`
+### Logo Image
+- **Recommended size:** 512 x 512 px (or your desired aspect ratio)
+- **Format:** PNG with transparency recommended
+- **Tip:** The logo will be centered and sized according to `logoWidth`
+
+## 🔧 Advanced Usage
 
-**Returns:** `Promise<boolean>` - Resolves to `true` if successful
+### TypeScript Support
+
+Full TypeScript support is included:
 
 ```typescript
-// Hide instantly
-await SplashScreen.hide();
+import SplashScreen, { SplashScreenInterface } from 'react-native-custom-splash';
 
-// Hide with fade animation
-await SplashScreen.hide(true);
+const hideSplash = async (): Promise<void> => {
+  await SplashScreen.hide(true);
+};
 ```
 
-## Example
+### React Navigation Integration
 
-```typescript
-import React, { useEffect, useState } from 'react';
-import { View, Text, ActivityIndicator } from 'react-native';
+```javascript
+import { NavigationContainer } from '@react-navigation/native';
 import SplashScreen from 'react-native-custom-splash';
 
-export default function App() {
-  const [appIsReady, setAppIsReady] = useState(false);
+function App() {
+  const [isReady, setIsReady] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     async function prepare() {
       try {
         // Load your resources here
         await loadFonts();
         await loadData();
-        
-        // Artificially delay for demo
-        await new Promise(resolve => setTimeout(resolve, 2000));
       } catch (e) {
         console.warn(e);
       } finally {
-        setAppIsReady(true);
+        setIsReady(true);
       }
     }
 
     prepare();
   }, []);
 
-  useEffect(() => {
-    if (appIsReady) {
-      // Hide splash screen with animation when app is ready
+  React.useEffect(() => {
+    if (isReady) {
       SplashScreen.hide(true);
     }
-  }, [appIsReady]);
+  }, [isReady]);
 
-  if (!appIsReady) {
-    return null; // Splash screen is visible
+  if (!isReady) {
+    return null;
   }
 
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>App is ready!</Text>
-    </View>
+    <NavigationContainer>
+      {/* Your navigation */}
+    </NavigationContainer>
   );
 }
 ```
 
-## Troubleshooting
-
-### iOS
+## 🔄 Migration from Manual Setup
 
-**Module not found:**
-- Make sure you ran `pod install` in the `ios/` directory
-- Clean build folder: `cd ios && rm -rf build && cd ..`
-- Rebuild the app
+If you were using the old manual method, you can now simplify:
 
-**Splash image not showing:**
-- Verify the image is named `splash` in your Assets catalog
-- Check that the image is added to the target
+**Before (Manual Method):**
+1. ❌ Manually copy images to `ios/` folder
+2. ❌ Open Xcode and add images to Assets
+3. ❌ Manually copy images to `android/app/src/main/res/drawable/`
+4. ❌ Manually edit `colors.xml`
+5. ❌ Configure multiple drawable folders
 
-### Android
+**After (Automatic Method):**
+1. ✅ Add images to `assets/` folder
+2. ✅ Configure in `app.json`
+3. ✅ Run `npx expo prebuild --clean`
+4. ✅ Done!
 
-**Module not found:**
-- Verify `SplashScreenPackage()` is added to `MainApplication.kt`
-- Clean build: `cd android && ./gradlew clean && cd ..`
-- Rebuild the app
+## 🛠️ Manual Setup (Non-Expo Projects)
 
-**Splash image not showing:**
-- Check that `splash.png` exists in `res/drawable/`
-- Verify the resource name matches in `splash_screen.xml`
+If you're not using Expo, you can still use this package with manual setup:
 
-### Expo
+### iOS
 
-**Plugin not working:**
-- Make sure you added the plugin to `app.json`
-- Run `npx expo prebuild --clean`
-- Rebuild the app
+Add your splash image to your Xcode project:
+1. Open your project in Xcode
+2. Add an image asset named `splash_image` for background and/or `splash_logo` for center logo to your Assets catalog
 
-## TypeScript
+### Android
 
-This package includes TypeScript definitions. The module exports the following interface:
+Add your images to Android resources:
+1. Add `splash_image.png` (background) and/or `splash_logo.png` (center logo) to `android/app/src/main/res/drawable/`
+2. Customize the background color in `android/app/src/main/res/values/colors.xml`:
 
-```typescript
-interface SplashScreenInterface {
-  show(): void;
-  hide(animated?: boolean): Promise<boolean>;
-}
+```xml
+<color name="splash_background">#FFFFFF</color>
 ```
 
-## License
+## ❓ Troubleshooting
+
+### Splash screen not showing
+- Make sure you run `npx expo prebuild --clean` after changing configuration
+- Check that your image paths in `app.json` are correct and files exist
+- Try cleaning your build: `cd ios && pod install && cd ..` for iOS
+
+### Images not updating
+- Run `npx expo prebuild --clean` to force regeneration of native projects
+- Clear build caches and rebuild
+
+### TypeScript errors
+- Make sure you have `@types/react` and `@types/react-native` installed
+- The package includes TypeScript definitions
+
+## 📄 License
 
 MIT
 
-## Contributing
+## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## Issues
+## 💖 Support
+
+If you find this package helpful, please give it a ⭐️ on [GitHub](https://github.com/vijaykishan312/react-native-custom-splash)!
+
+---
 
-If you encounter any issues, please file them on the GitHub repository.
+Made with ❤️ for the React Native community

package/ios/SplashScreenModule.swift

@@ -40,16 +40,22 @@ class SplashScreenModule: NSObject {
       let splashVC = UIViewController()
       splashVC.view.backgroundColor = .white
       
-      // Try to load splash image from the main bundle
-      // Users should add their splash image to their app's assets
-      if let splashImage = UIImage(named: "splash") {
+      // Try to load background splash image from the main bundle
+      if let splashImage = UIImage(named: "splash_image") {
+        let imageView = UIImageView(image: splashImage)
+        imageView.contentMode = .scaleAspectFill
+        imageView.frame = splashVC.view.bounds
+        imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+        splashVC.view.addSubview(imageView)
+      } else if let splashImage = UIImage(named: "splash") {
+        // Fallback to old "splash" name for backward compatibility
         let imageView = UIImageView(image: splashImage)
         imageView.contentMode = .scaleAspectFill
         imageView.frame = splashVC.view.bounds
         imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
         splashVC.view.addSubview(imageView)
       } else {
-        // Fallback: show white screen if no splash image is provided
+        // Fallback: show white screen if no background image
         if #available(iOS 13.0, *) {
           splashVC.view.backgroundColor = .systemBackground
         } else {
@@ -57,6 +63,27 @@ class SplashScreenModule: NSObject {
         }
       }
       
+      // Add center logo if available
+      if let logoImage = UIImage(named: "splash_logo") {
+        let logoView = UIImageView(image: logoImage)
+        logoView.contentMode = .scaleAspectFit
+        
+        // Set logo size (150pt width by default, maintaining aspect ratio)
+        let logoWidth: CGFloat = 150
+        let aspectRatio = logoImage.size.height / logoImage.size.width
+        let logoHeight = logoWidth * aspectRatio
+        
+        logoView.frame = CGRect(
+          x: (splashVC.view.bounds.width - logoWidth) / 2,
+          y: (splashVC.view.bounds.height - logoHeight) / 2,
+          width: logoWidth,
+          height: logoHeight
+        )
+        
+        logoView.autoresizingMask = [.flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin]
+        splashVC.view.addSubview(logoView)
+      }
+      
       window.rootViewController = splashVC
       window.makeKeyAndVisible()
       

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-custom-splash",
-    "version": "1.0.3",
+    "version": "2.0.0",
     "description": "A custom splash screen module for React Native with native iOS and Android support, fully compatible with Expo",
     "main": "src/index.js",
     "types": "src/index.d.ts",
@@ -23,6 +23,10 @@
         "type": "git",
         "url": "git+https://github.com/vijaykishan312/react-native-custom-splash.git"
     },
+    "dependencies": {
+        "@expo/config-plugins": "^8.0.0",
+        "@expo/image-utils": "^0.5.0"
+    },
     "peerDependencies": {
         "react": "*",
         "react-native": "*",

package/plugin/src/index.js

@@ -3,14 +3,210 @@ const {
     withPlugins,
     withMainActivity,
     withMainApplication,
+    AndroidConfig,
+    IOSConfig,
 } = require('@expo/config-plugins');
 const path = require('path');
 const fs = require('fs');
+const { generateImageAsync } = require('@expo/image-utils');
 
 /**
- * Plugin to add SplashScreenModule to Android
+ * Get plugin configuration from app.json
  */
-const withSplashScreenAndroid = (config) => {
+function getPluginConfig(config) {
+    const plugins = config.plugins || [];
+    const splashPlugin = plugins.find(plugin => {
+        if (Array.isArray(plugin) && plugin[0] === 'react-native-custom-splash') {
+            return true;
+        }
+        return plugin === 'react-native-custom-splash';
+    });
+
+    if (Array.isArray(splashPlugin) && splashPlugin[1]) {
+        return splashPlugin[1];
+    }
+
+    // Default configuration
+    return {
+        backgroundColor: '#FFFFFF',
+        image: null,
+        logo: null,
+        logoWidth: 150,
+    };
+}
+
+/**
+ * Copy and resize image to Android drawable folders
+ */
+async function copyImageToAndroid(projectRoot, imagePath, outputName, resDir) {
+    if (!imagePath || !fs.existsSync(path.join(projectRoot, imagePath))) {
+        return false;
+    }
+
+    const sourceImage = path.join(projectRoot, imagePath);
+
+    // Define sizes for different densities
+    const densities = {
+        'mdpi': 1,
+        'hdpi': 1.5,
+        'xhdpi': 2,
+        'xxhdpi': 3,
+        'xxxhdpi': 4,
+    };
+
+    for (const [density, scale] of Object.entries(densities)) {
+        const drawableDir = path.join(resDir, `drawable-${density}`);
+
+        // Create directory if it doesn't exist
+        if (!fs.existsSync(drawableDir)) {
+            fs.mkdirSync(drawableDir, { recursive: true });
+        }
+
+        const outputPath = path.join(drawableDir, `${outputName}.png`);
+
+        // Copy the image (you can add resizing logic here if needed)
+        fs.copyFileSync(sourceImage, outputPath);
+    }
+
+    return true;
+}
+
+/**
+ * Copy image to iOS assets
+ */
+async function copyImageToIOS(projectRoot, imagePath, outputName, iosProjectPath, projectName) {
+    if (!imagePath || !fs.existsSync(path.join(projectRoot, imagePath))) {
+        return false;
+    }
+
+    const sourceImage = path.join(projectRoot, imagePath);
+    const assetsDir = path.join(iosProjectPath, projectName, 'Images.xcassets', `${outputName}.imageset`);
+
+    // Create imageset directory
+    if (!fs.existsSync(assetsDir)) {
+        fs.mkdirSync(assetsDir, { recursive: true });
+    }
+
+    // Copy image files for different scales
+    const scales = ['1x', '2x', '3x'];
+    const images = [];
+
+    for (const scale of scales) {
+        const filename = `${outputName}@${scale}.png`;
+        const destPath = path.join(assetsDir, filename);
+        fs.copyFileSync(sourceImage, destPath);
+
+        images.push({
+            idiom: 'universal',
+            filename: filename,
+            scale: scale,
+        });
+    }
+
+    // Create Contents.json
+    const contentsJson = {
+        images: images,
+        info: {
+            author: 'xcode',
+            version: 1,
+        },
+    };
+
+    fs.writeFileSync(
+        path.join(assetsDir, 'Contents.json'),
+        JSON.stringify(contentsJson, null, 2)
+    );
+
+    return true;
+}
+
+/**
+ * Update Android colors.xml
+ */
+function updateAndroidColors(resDir, backgroundColor) {
+    const valuesDir = path.join(resDir, 'values');
+    if (!fs.existsSync(valuesDir)) {
+        fs.mkdirSync(valuesDir, { recursive: true });
+    }
+
+    const colorsPath = path.join(valuesDir, 'colors.xml');
+    const colorsXml = `<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="splash_background">${backgroundColor}</color>
+</resources>
+`;
+
+    fs.writeFileSync(colorsPath, colorsXml);
+}
+
+/**
+ * Update Android splash drawable
+ */
+function updateAndroidSplashDrawable(resDir, hasImage, hasLogo) {
+    const drawableDir = path.join(resDir, 'drawable');
+    if (!fs.existsSync(drawableDir)) {
+        fs.mkdirSync(drawableDir, { recursive: true });
+    }
+
+    const splashPath = path.join(drawableDir, 'splash.xml');
+
+    let items = [];
+
+    // Background color
+    items.push('    <item android:drawable="@color/splash_background"/>');
+
+    // Background image if provided
+    if (hasImage) {
+        items.push('    <item>');
+        items.push('        <bitmap');
+        items.push('            android:gravity="fill"');
+        items.push('            android:src="@drawable/splash_image"/>');
+        items.push('    </item>');
+    }
+
+    // Logo if provided
+    if (hasLogo) {
+        items.push('    <item>');
+        items.push('        <bitmap');
+        items.push('            android:gravity="center"');
+        items.push('            android:src="@drawable/splash_logo"/>');
+        items.push('    </item>');
+    }
+
+    const splashXml = `<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+${items.join('\n')}
+</layer-list>
+`;
+
+    fs.writeFileSync(splashPath, splashXml);
+}
+
+/**
+ * Update Android splash layout
+ */
+function updateAndroidSplashLayout(resDir) {
+    const layoutDir = path.join(resDir, 'layout');
+    if (!fs.existsSync(layoutDir)) {
+        fs.mkdirSync(layoutDir, { recursive: true });
+    }
+
+    const layoutPath = path.join(layoutDir, 'splash_screen.xml');
+    const layoutXml = `<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="@drawable/splash">
+</FrameLayout>
+`;
+
+    fs.writeFileSync(layoutPath, layoutXml);
+}
+
+/**
+ * Plugin to configure Android splash screen
+ */
+const withSplashScreenAndroid = (config, pluginConfig) => {
     // Add package to MainApplication
     config = withMainApplication(config, async (config) => {
         const { modResults } = config;
@@ -61,18 +257,89 @@ const withSplashScreenAndroid = (config) => {
         return config;
     });
 
+    // Configure Android resources
+    config = withDangerousMod(config, [
+        'android',
+        async (config) => {
+            const projectRoot = config.modRequest.projectRoot;
+            const resDir = path.join(
+                config.modRequest.platformProjectRoot,
+                'app',
+                'src',
+                'main',
+                'res'
+            );
+
+            // Update colors
+            updateAndroidColors(resDir, pluginConfig.backgroundColor);
+
+            // Copy images if provided
+            let hasImage = false;
+            let hasLogo = false;
+
+            if (pluginConfig.image) {
+                hasImage = await copyImageToAndroid(
+                    projectRoot,
+                    pluginConfig.image,
+                    'splash_image',
+                    resDir
+                );
+            }
+
+            if (pluginConfig.logo) {
+                hasLogo = await copyImageToAndroid(
+                    projectRoot,
+                    pluginConfig.logo,
+                    'splash_logo',
+                    resDir
+                );
+            }
+
+            // Update splash drawable
+            updateAndroidSplashDrawable(resDir, hasImage, hasLogo);
+
+            // Update splash layout
+            updateAndroidSplashLayout(resDir);
+
+            return config;
+        },
+    ]);
+
     return config;
 };
 
 /**
- * Plugin to add SplashScreenModule to iOS
+ * Plugin to configure iOS splash screen
  */
-const withSplashScreenIOS = (config) => {
+const withSplashScreenIOS = (config, pluginConfig) => {
     return withDangerousMod(config, [
         'ios',
         async (config) => {
-            // The native files will be linked via CocoaPods
-            // No additional configuration needed here
+            const projectRoot = config.modRequest.projectRoot;
+            const iosProjectPath = config.modRequest.platformProjectRoot;
+            const projectName = config.modRequest.projectName;
+
+            // Copy images to iOS assets
+            if (pluginConfig.image) {
+                await copyImageToIOS(
+                    projectRoot,
+                    pluginConfig.image,
+                    'splash_image',
+                    iosProjectPath,
+                    projectName
+                );
+            }
+
+            if (pluginConfig.logo) {
+                await copyImageToIOS(
+                    projectRoot,
+                    pluginConfig.logo,
+                    'splash_logo',
+                    iosProjectPath,
+                    projectName
+                );
+            }
+
             return config;
         },
     ]);
@@ -81,9 +348,11 @@ const withSplashScreenIOS = (config) => {
 /**
  * Main plugin export
  */
-module.exports = (config) => {
+module.exports = (config, props = {}) => {
+    const pluginConfig = props || getPluginConfig(config);
+
     return withPlugins(config, [
-        withSplashScreenAndroid,
-        withSplashScreenIOS,
+        [withSplashScreenAndroid, pluginConfig],
+        [withSplashScreenIOS, pluginConfig],
     ]);
 };