react-native-custom-splash 1.0.3 → 2.0.2

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,103 +20,169 @@ 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
+
+Choose one of the 4 configuration options below based on your needs:
+
+## 🎨 Configuration Examples
+
+### **Option 1: Single Full Image** (Most Common) ⭐
+
+Perfect for a complete branded splash screen with your custom design.
 
 ```json
 {
   "expo": {
+    "name": "YourApp",
     "plugins": [
-      "react-native-custom-splash"
+      [
+        "react-native-custom-splash",
+        {
+          "image": "./assets/splash.png"
+        }
+      ]
     ]
   }
 }
 ```
 
-Then run prebuild:
-
-```bash
-npx expo prebuild
+**Project Structure:**
+```
+your-project/
+├── assets/
+│   └── splash.png          ← Your full-screen image (1242×2688px)
+└── app.json
 ```
 
-### For Bare React Native Projects
+---
 
-```bash
-npm install react-native-custom-splash
-# or
-yarn add react-native-custom-splash
-```
+### **Option 2: Background Color + Center Logo**
 
-#### iOS Setup
+Great for a clean, minimal look with just your logo.
 
-1. Install pods:
-```bash
-cd ios && pod install && cd ..
+```json
+{
+  "expo": {
+    "name": "YourApp",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#4F46E5",
+          "logo": "./assets/logo.png",
+          "logoWidth": 180
+        }
+      ]
+    ]
+  }
+}
 ```
 
-2. The module will be automatically linked.
+**Project Structure:**
+```
+your-project/
+├── assets/
+│   └── logo.png            ← Your center logo (512×512px)
+└── app.json
+```
 
-#### Android Setup
+---
 
-1. Add the package to your `MainApplication.kt`:
+### **Option 3: Background Image + Center Logo**
 
-```kotlin
-import com.rncustomsplash.SplashScreenPackage
+Maximum customization - background image with logo on top.
 
-// In getPackages() method:
-packages.add(SplashScreenPackage())
+```json
+{
+  "expo": {
+    "name": "YourApp",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#FFFFFF",
+          "image": "./assets/splash-bg.png",
+          "logo": "./assets/logo.png",
+          "logoWidth": 150
+        }
+      ]
+    ]
+  }
+}
 ```
 
-2. Show splash in `MainActivity.kt`:
-
-```kotlin
-import com.rncustomsplash.SplashScreenModule
-
-override fun onCreate(savedInstanceState: Bundle?) {
-    SplashScreenModule.show(this)
-    super.onCreate(savedInstanceState)
-}
+**Project Structure:**
+```
+your-project/
+├── assets/
+│   ├── splash-bg.png       ← Background image
+│   └── logo.png            ← Center logo
+└── app.json
 ```
 
-## Adding Custom Splash Images
+---
 
-### iOS
+### **Option 4: Only Background Color**
 
-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
+Simple solid color background.
 
-### Android
+```json
+{
+  "expo": {
+    "name": "YourApp",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#FF6B6B"
+        }
+      ]
+    ]
+  }
+}
+```
 
-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`:
+### Step 3: Run prebuild
 
-```xml
-<color name="splash_background">#FFFFFF</color>
+```bash
+npx expo prebuild --clean
 ```
 
-## Usage
+**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
 
-```typescript
+### Step 4: Use in your app
+
+```javascript
 import SplashScreen from 'react-native-custom-splash';
-import { useEffect } from 'react';
+import React, { 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();
+    // Hide splash screen after app loads
+    setTimeout(() => {
+      SplashScreen.hide(true); // true = animated
+    }, 2000);
   }, []);
 
   return (
@@ -127,152 +191,249 @@ function App() {
 }
 ```
 
-## Example Project
+## ⚙️ Configuration Options Reference
 
-A complete working example is included in the `example/` directory. It demonstrates:
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `backgroundColor` | `string` | `#FFFFFF` | Background color (hex format: #RRGGBB) |
+| `image` | `string` | `null` | Path to full background image (optional) |
+| `logo` | `string` | `null` | Path to center logo image (optional) |
+| `logoWidth` | `number` | `150` | Width of the center logo in pixels |
 
-- ✅ Automatic splash screen on launch
-- ✅ Loading progress simulation
-- ✅ Animated hide transitions
-- ✅ Manual show/hide controls
-- ✅ Full TypeScript integration
+## 📱 API Reference
 
-### Run the Example
+### `SplashScreen.hide(animated)`
 
-```bash
-cd example
-npm install
-npx expo prebuild
-npm run ios  # or npm run android
-```
+Hides the splash screen.
 
-See [example/README.md](./example/README.md) for detailed instructions.
+**Parameters:**
+- `animated` (boolean): Whether to animate the hide transition. Default: `true`
+
+**Returns:** Promise<boolean>
+
+**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
+
+### TypeScript Support
 
-**Returns:** `Promise<boolean>` - Resolves to `true` if successful
+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
+## 🔄 Migration from Manual Setup
 
-### iOS
+If you were using the old manual method, you can now simplify:
+
+**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
+
+**After (Automatic Method):**
+1. ✅ Add images to `assets/` folder
+2. ✅ Configure in `app.json`
+3. ✅ Run `npx expo prebuild --clean`
+4. ✅ Done!
+
+## 🛠️ Manual Setup (Non-Expo Projects)
 
-**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're not using Expo, you can still use this package with manual setup:
 
-**Splash image not showing:**
-- Verify the image is named `splash` in your Assets catalog
-- Check that the image is added to the target
+### iOS
+
+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
 
 ### Android
 
-**Module not found:**
-- Verify `SplashScreenPackage()` is added to `MainApplication.kt`
-- Clean build: `cd android && ./gradlew clean && cd ..`
-- Rebuild the app
+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`:
 
-**Splash image not showing:**
-- Check that `splash.png` exists in `res/drawable/`
-- Verify the resource name matches in `splash_screen.xml`
+```xml
+<color name="splash_background">#FFFFFF</color>
+```
 
-### Expo
+## ❓ Troubleshooting
 
-**Plugin not working:**
-- Make sure you added the plugin to `app.json`
-- Run `npx expo prebuild --clean`
-- Rebuild the app
+### ⚠️ Error: "Plugin is an unexpected object"
 
-## TypeScript
+**Full Error:**
+```
+PluginError: Plugin is an unexpected object, with keys: "backgroundColor, image, logoWidth".
+```
 
-This package includes TypeScript definitions. The module exports the following interface:
+**Cause:** Your plugin configuration is not properly wrapped in square brackets.
 
-```typescript
-interface SplashScreenInterface {
-  show(): void;
-  hide(animated?: boolean): Promise<boolean>;
+**❌ Wrong:**
+```json
+{
+  "plugins": [
+    "react-native-custom-splash",
+    {
+      "backgroundColor": "#FF6B6B"
+    }
+  ]
 }
 ```
 
-## License
+**✅ Correct:**
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#FF6B6B"
+      }
+    ]
+  ]
+}
+```
+
+**Key Point:** When passing configuration to a plugin, wrap BOTH the plugin name and the config object in square brackets `[]`.
+
+---
+
+### 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
+- Verify images are in the `assets/` folder
+- Try cleaning your build:
+  - iOS: `cd ios && pod install && cd ..`
+  - Android: `cd android && ./gradlew clean && cd ..`
+
+### Images not updating
+- Run `npx expo prebuild --clean` to force regeneration of native projects
+- Delete `ios/` and `android/` folders, then run `npx expo prebuild --clean` again
+- Clear build caches:
+  - iOS: `rm -rf ios/Pods ios/build`
+  - Android: `cd android && ./gradlew clean && cd ..`
+
+### Image paths not working
+- Use relative paths from project root: `"./assets/splash.png"` ✅
+- Don't use absolute paths: `"/Users/..."` ❌
+- Make sure the file extension matches (`.png`, `.jpg`)
+- Check file actually exists at that path
+
+### Background color not working
+- Use hex format: `"#FF6B6B"` ✅
+- Don't forget the `#`: `"FF6B6B"` ❌
+- Use 6-digit format: `"#FFFFFF"` ✅ not `"#FFF"` ❌
+
+### TypeScript errors
+- Make sure you have `@types/react` and `@types/react-native` installed
+- The package includes TypeScript definitions
+- Try: `npm install --save-dev @types/react @types/react-native`
+
+### Pod install fails (iOS)
+```bash
+cd ios
+rm -rf Pods Podfile.lock
+pod install --repo-update
+cd ..
+```
+
+### Still having issues?
+1. Delete `node_modules/` and reinstall: `npm install` or `yarn install`
+2. Delete `ios/` and `android/` folders
+3. Run `npx expo prebuild --clean`
+4. Check the [GitHub Issues](https://github.com/vijaykishan312/react-native-custom-splash/issues)
+
+## 📄 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/example/README.md

@@ -0,0 +1,175 @@
+# react-native-custom-splash Example App
+
+This example demonstrates how to use `react-native-custom-splash` in your Expo app.
+
+## 📁 Project Structure
+
+```
+example/
+├── assets/
+│   ├── splash-bg.png       ← Background image for splash
+│   ├── logo.png            ← Center logo
+│   ├── icon.png            ← App icon
+│   └── ...
+├── app.json                ← Configuration with plugin setup
+├── App.tsx                 ← Main app with SplashScreen usage
+└── package.json
+```
+
+## 🚀 Running the Example
+
+### 1. Install Dependencies
+
+```bash
+cd example
+npm install
+```
+
+### 2. Run Prebuild
+
+```bash
+npx expo prebuild --clean
+```
+
+### 3. Run on Device/Simulator
+
+**iOS:**
+```bash
+npx expo run:ios
+```
+
+**Android:**
+```bash
+npx expo run:android
+```
+
+## 🎨 Configuration Examples
+
+The example `app.json` is configured with **Option 3** (Background Image + Logo):
+
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#4F46E5",
+        "image": "./assets/splash-bg.png",
+        "logo": "./assets/logo.png",
+        "logoWidth": 180
+      }
+    ]
+  ]
+}
+```
+
+### Try Different Configurations:
+
+#### Option 1: Single Full Image (Simplest)
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "image": "./assets/splash.png"
+      }
+    ]
+  ]
+}
+```
+
+#### Option 2: Color + Logo (Minimal)
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#4F46E5",
+        "logo": "./assets/logo.png",
+        "logoWidth": 180
+      }
+    ]
+  ]
+}
+```
+
+#### Option 4: Only Color (Fastest)
+```json
+{
+  "plugins": [
+    [
+      "react-native-custom-splash",
+      {
+        "backgroundColor": "#FF6B6B"
+      }
+    ]
+  ]
+}
+```
+
+**After changing configuration:**
+```bash
+npx expo prebuild --clean
+```
+
+## 💡 Usage in Code
+
+Check `App.tsx` to see how the splash screen is used:
+
+```typescript
+import SplashScreen from 'react-native-custom-splash';
+import { useEffect } from 'react';
+
+function App() {
+  useEffect(() => {
+    // Hide splash after 2 seconds
+    const timer = setTimeout(() => {
+      SplashScreen.hide(true); // true = with animation
+    }, 2000);
+    
+    return () => clearTimeout(timer);
+  }, []);
+  
+  // Your app content...
+}
+```
+
+## 🖼️ Image Guidelines
+
+### Background Image (`splash-bg.png`)
+- **Size:** 1242 x 2688 px (iPhone 13 Pro Max)
+- **Format:** PNG or JPG
+- **Aspect Ratio:** 9:19.5 (standard phone ratio)
+- **Design:** Center-weighted content
+
+### Logo (`logo.png`)
+- **Size:** 512 x 512 px (or your aspect ratio)
+- **Format:** PNG with transparency
+- **Design:** Will be scaled based on `logoWidth`
+
+## 🔧 Troubleshooting
+
+### Changes not reflecting?
+```bash
+# Clean everything and rebuild
+npx expo prebuild --clean
+cd ios && pod install && cd ..
+```
+
+### Images not showing?
+- Check image paths in `app.json` are correct
+- Ensure images exist in `assets/` folder
+- Run `npx expo prebuild --clean`
+
+### TypeScript errors?
+```bash
+npm install --save-dev @types/react @types/react-native
+```
+
+## 📚 Learn More
+
+- [Main README](../README.md)
+- [npm Package](https://www.npmjs.com/package/react-native-custom-splash)
+- [GitHub Repository](https://github.com/vijaykishan312/react-native-custom-splash)

package/example/app.json

@@ -0,0 +1,38 @@
+{
+    "expo": {
+        "name": "SplashScreenExample",
+        "slug": "splash-screen-example",
+        "version": "1.0.0",
+        "orientation": "portrait",
+        "icon": "./assets/icon.png",
+        "userInterfaceStyle": "light",
+        "assetBundlePatterns": [
+            "**/*"
+        ],
+        "ios": {
+            "supportsTablet": true,
+            "bundleIdentifier": "com.example.splashscreen"
+        },
+        "android": {
+            "adaptiveIcon": {
+                "foregroundImage": "./assets/adaptive-icon.png",
+                "backgroundColor": "#ffffff"
+            },
+            "package": "com.example.splashscreen"
+        },
+        "web": {
+            "favicon": "./assets/favicon.png"
+        },
+        "plugins": [
+            [
+                "react-native-custom-splash",
+                {
+                    "backgroundColor": "#4F46E5",
+                    "image": "./assets/splash-bg.png",
+                    "logo": "./assets/logo.png",
+                    "logoWidth": 180
+                }
+            ]
+        ]
+    }
+}

package/example/app.json.option1-full-image

@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "Example - Single Full Image",
+    "slug": "splash-example-full-image",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "image": "./assets/splash.png"
+        }
+      ]
+    ]
+  }
+}

package/example/app.json.option2-color-logo

@@ -0,0 +1,16 @@
+{
+  "expo": {
+    "name": "Example - Color + Logo",
+    "slug": "splash-example-color-logo",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#4F46E5",
+          "logo": "./assets/logo.png",
+          "logoWidth": 180
+        }
+      ]
+    ]
+  }
+}

package/example/app.json.option3-image-logo

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "name": "Example - Image + Logo",
+    "slug": "splash-example-image-logo",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#FFFFFF",
+          "image": "./assets/splash-bg.png",
+          "logo": "./assets/logo.png",
+          "logoWidth": 150
+        }
+      ]
+    ]
+  }
+}

package/example/app.json.option4-color-only

@@ -0,0 +1,14 @@
+{
+  "expo": {
+    "name": "Example - Color Only",
+    "slug": "splash-example-color-only",
+    "plugins": [
+      [
+        "react-native-custom-splash",
+        {
+          "backgroundColor": "#FF6B6B"
+        }
+      ]
+    ]
+  }
+}

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.2",
     "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": "*",
@@ -40,6 +44,8 @@
         "plugin/",
         "app.plugin.js",
         "react-native-custom-splash.podspec",
+        "example/app.json*",
+        "example/README.md",
         "README.md",
         "LICENSE"
     ]

package/plugin/src/index.js

@@ -3,14 +3,257 @@ 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
+ * Validate and normalize plugin configuration
  */
-const withSplashScreenAndroid = (config) => {
+function validateAndNormalizeConfig(props) {
+    // Check if props is valid
+    if (!props || typeof props !== 'object') {
+        console.warn('⚠️  react-native-custom-splash: No configuration provided, using defaults');
+        return {
+            backgroundColor: '#FFFFFF',
+            image: null,
+            logo: null,
+            logoWidth: 150,
+        };
+    }
+
+    // Validate backgroundColor
+    if (props.backgroundColor && !/^#[0-9A-Fa-f]{6}$/.test(props.backgroundColor)) {
+        console.warn(`⚠️  react-native-custom-splash: Invalid backgroundColor "${props.backgroundColor}", using default #FFFFFF`);
+        props.backgroundColor = '#FFFFFF';
+    }
+
+    // Validate logoWidth
+    if (props.logoWidth && (typeof props.logoWidth !== 'number' || props.logoWidth <= 0)) {
+        console.warn(`⚠️  react-native-custom-splash: Invalid logoWidth "${props.logoWidth}", using default 150`);
+        props.logoWidth = 150;
+    }
+
+    // Validate image path
+    if (props.image && typeof props.image !== 'string') {
+        console.warn(`⚠️  react-native-custom-splash: Invalid image path, must be a string`);
+        props.image = null;
+    }
+
+    // Validate logo path
+    if (props.logo && typeof props.logo !== 'string') {
+        console.warn(`⚠️  react-native-custom-splash: Invalid logo path, must be a string`);
+        props.logo = null;
+    }
+
+    return {
+        backgroundColor: props.backgroundColor || '#FFFFFF',
+        image: props.image || null,
+        logo: props.logo || null,
+        logoWidth: props.logoWidth || 150,
+    };
+}
+
+/**
+ * Get plugin configuration from app.json
+ */
+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 validateAndNormalizeConfig(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 +304,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 +395,22 @@ const withSplashScreenIOS = (config) => {
 /**
  * Main plugin export
  */
-module.exports = (config) => {
+module.exports = (config, props = {}) => {
+    // Validate the props parameter
+    let pluginConfig;
+
+    if (props && Object.keys(props).length > 0) {
+        // Props provided directly (from array syntax)
+        pluginConfig = validateAndNormalizeConfig(props);
+    } else {
+        // Try to get from config (fallback)
+        pluginConfig = getPluginConfig(config);
+    }
+
+    console.log('✅ react-native-custom-splash configured with:', pluginConfig);
+
     return withPlugins(config, [
-        withSplashScreenAndroid,
-        withSplashScreenIOS,
+        [withSplashScreenAndroid, pluginConfig],
+        [withSplashScreenIOS, pluginConfig],
     ]);
 };