react-native-custom-splash 2.1.4 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-custom-splash",
-    "version": "2.1.4",
+    "version": "2.2.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",

package/plugin/src/index.js

@@ -8,6 +8,7 @@ const {
 } = require('@expo/config-plugins');
 const path = require('path');
 const fs = require('fs');
+const withCustomiOSSplash = require('./withCustomSplash');
 
 /**
  * Validate and normalize plugin configuration
@@ -437,38 +438,76 @@ const withSplashScreenIOS = (config, pluginConfig) => {
             const iosProjectPath = config.modRequest.platformProjectRoot;
             const projectName = config.modRequest.projectName;
 
-            // Step 1: Update Info.plist
+            // Step 1: Update Info.plist to use LaunchScreen
             const infoPlistPath = path.join(iosProjectPath, projectName, 'Info.plist');
             if (fs.existsSync(infoPlistPath)) {
                 let infoPlist = fs.readFileSync(infoPlistPath, 'utf8');
+
+                // Update to use LaunchScreen
                 if (!infoPlist.includes('<key>UILaunchStoryboardName</key>')) {
                     infoPlist = infoPlist.replace('</dict>\n</plist>', '\t<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>\n</dict>\n</plist>');
+                } else {
+                    // Update existing value to LaunchScreen
+                    infoPlist = infoPlist.replace(
+                        /<key>UILaunchStoryboardName<\/key>\s*<string>.*?<\/string>/,
+                        '<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>'
+                    );
                 }
+
+                // Remove UILaunchScreen dictionary if present
                 infoPlist = infoPlist.replace(/<key>UILaunchScreen<\/key>[\s\S]*?<\/dict>/g, '');
+
                 fs.writeFileSync(infoPlistPath, infoPlist);
             }
 
+            // Step 2: Delete old/existing storyboards
+            const oldStoryboards = [
+                path.join(iosProjectPath, projectName, 'SplashScreen.storyboard'),
+                path.join(iosProjectPath, projectName, 'LaunchScreen.storyboard'),
+            ];
+
+            oldStoryboards.forEach(storyPath => {
+                if (fs.existsSync(storyPath)) {
+                    fs.unlinkSync(storyPath);
+                    console.log(`🗑️  Removed old storyboard: ${path.basename(storyPath)}`);
+                }
+            });
+
+            // Step 3: Remove SplashScreenLegacy from Images.xcassets
+            const legacyImagePath = path.join(iosProjectPath, projectName, 'Images.xcassets', 'SplashScreenLegacy.imageset');
+            if (fs.existsSync(legacyImagePath)) {
+                fs.rmSync(legacyImagePath, { recursive: true, force: true });
+                console.log('🗑️  Removed SplashScreenLegacy imageset');
+            }
+
+            // Step 4: Copy user images to iOS assets
             let hasImage = false;
             let hasLogo = false;
 
             if (pluginConfig.image) {
                 hasImage = await copyImageToIOS(projectRoot, pluginConfig.image, 'splash_image', iosProjectPath, projectName);
+                if (hasImage) {
+                    console.log('✅ Background image copied: splash_image');
+                }
             }
+
             if (pluginConfig.logo) {
                 hasLogo = await copyImageToIOS(projectRoot, pluginConfig.logo, 'splash_logo', iosProjectPath, projectName);
+                if (hasLogo) {
+                    console.log('✅ Logo image copied: splash_logo');
+                }
             }
 
+            // Step 5: Create fresh LaunchScreen.storyboard with user images
             const launchScreenPath = path.join(iosProjectPath, projectName, 'LaunchScreen.storyboard');
             const storyboardContent = createLaunchScreenStoryboard(hasImage, hasLogo, pluginConfig.backgroundColor);
             fs.writeFileSync(launchScreenPath, storyboardContent);
 
-            const legacyPath = path.join(iosProjectPath, projectName, 'Images.xcassets', 'SplashScreenLegacy.imageset');
-            if (fs.existsSync(legacyPath)) {
-                fs.rmSync(legacyPath, { recursive: true, force: true });
-                console.log('🗑️  Removed SplashScreenLegacy');
-            }
+            console.log('✅ LaunchScreen.storyboard created with YOUR images!');
+            console.log(`   - Background: ${hasImage ? 'splash_image' : 'color only'}`);
+            console.log(`   - Logo: ${hasLogo ? 'splash_logo' : 'none'}`);
+            console.log(`   - Color: ${pluginConfig.backgroundColor}`);
 
-            console.log('✅ iOS LaunchScreen configured!');
             return config;
         },
     ]);
@@ -492,6 +531,6 @@ module.exports = (config, props = {}) => {
 
     return withPlugins(config, [
         [withSplashScreenAndroid, pluginConfig],
-        [withSplashScreenIOS, pluginConfig],
+        [withCustomiOSSplash, pluginConfig],
     ]);
 };

package/plugin/src/withCustomSplash.js

@@ -0,0 +1,216 @@
+const { withDangerousMod } = require('@expo/config-plugins');
+const path = require('path');
+const fs = require('fs');
+
+/**
+ * COMPLETE iOS Splash Screen Setup
+ * This runs AFTER Expo's default splash and overwrites everything
+ */
+function withCustomiOSSplash(config, pluginConfig) {
+    return withDangerousMod(config, [
+        'ios',
+        async (config) => {
+            const projectRoot = config.modRequest.projectRoot;
+            const iosPath = config.modRequest.platformProjectRoot;
+            const projectName = config.modRequest.projectName;
+
+            console.log('\n🚀 Setting up custom iOS splash screen...\n');
+
+            // 1. Update Info.plist
+            const plistPath = path.join(iosPath, projectName, 'Info.plist');
+            if (fs.existsSync(plistPath)) {
+                let plist = fs.readFileSync(plistPath, 'utf8');
+
+                // Force LaunchScreen
+                if (!plist.includes('<key>UILaunchStoryboardName</key>')) {
+                    plist = plist.replace(
+                        '</dict>\n</plist>',
+                        '\t<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>\n</dict>\n</plist>'
+                    );
+                } else {
+                    plist = plist.replace(
+                        /<key>UILaunchStoryboardName<\/key>\s*<string>.*?<\/string>/,
+                        '<key>UILaunchStoryboardName</key>\n\t<string>LaunchScreen</string>'
+                    );
+                }
+
+                // Remove UILaunchScreen dictionary
+                plist = plist.replace(/<key>UILaunchScreen<\/key>[\s\S]*?<\/dict>/g, '');
+
+                fs.writeFileSync(plistPath, plist);
+                console.log('✅ Info.plist updated');
+            }
+
+            // 2. Delete ALL old storyboards
+            const storyboards = [
+                path.join(iosPath, projectName, 'SplashScreen.storyboard'),
+                path.join(iosPath, projectName, 'LaunchScreen.storyboard'),
+            ];
+
+            storyboards.forEach(sb => {
+                if (fs.existsSync(sb)) {
+                    fs.unlinkSync(sb);
+                    console.log(`🗑️  Deleted: ${path.basename(sb)}`);
+                }
+            });
+
+            // 3. Delete SplashScreenLegacy
+            const legacyPath = path.join(iosPath, projectName, 'Images.xcassets', 'SplashScreenLegacy.imageset');
+            if (fs.existsSync(legacyPath)) {
+                fs.rmSync(legacyPath, { recursive: true });
+                console.log('🗑️  Deleted: SplashScreenLegacy');
+            }
+
+            // 4. Delete SplashScreen imageset (from Expo)
+            const splashImagePath = path.join(iosPath, projectName, 'Images.xcassets', 'SplashScreen.imageset');
+            if (fs.existsSync(splashImagePath)) {
+                fs.rmSync(splashImagePath, { recursive: true });
+                console.log('🗑️  Deleted: SplashScreen');
+            }
+
+            // 5. Copy user images
+            const assetsPath = path.join(iosPath, projectName, 'Images.xcassets');
+            let hasImage = false;
+            let hasLogo = false;
+
+            if (pluginConfig.image) {
+                const srcImage = path.join(projectRoot, pluginConfig.image);
+                if (fs.existsSync(srcImage)) {
+                    const destDir = path.join(assetsPath, 'splash_image.imageset');
+                    fs.mkdirSync(destDir, { recursive: true });
+
+                    // Copy for all scales
+                    ['', '@2x', '@3x'].forEach(scale => {
+                        const destFile = path.join(destDir, `splash_image${scale}.png`);
+                        fs.copyFileSync(srcImage, destFile);
+                    });
+
+                    // Create Contents.json
+                    const contents = {
+                        images: [
+                            { idiom: 'universal', filename: 'splash_image.png', scale: '1x' },
+                            { idiom: 'universal', filename: 'splash_image@2x.png', scale: '2x' },
+                            { idiom: 'universal', filename: 'splash_image@3x.png', scale: '3x' }
+                        ],
+                        info: { author: 'xcode', version: 1 }
+                    };
+                    fs.writeFileSync(path.join(destDir, 'Contents.json'), JSON.stringify(contents, null, 2));
+
+                    hasImage = true;
+                    console.log('✅ Copied: splash_image');
+                }
+            }
+
+            if (pluginConfig.logo) {
+                const srcLogo = path.join(projectRoot, pluginConfig.logo);
+                if (fs.existsSync(srcLogo)) {
+                    const destDir = path.join(assetsPath, 'splash_logo.imageset');
+                    fs.mkdirSync(destDir, { recursive: true });
+
+                    // Copy for all scales
+                    ['', '@2x', '@3x'].forEach(scale => {
+                        const destFile = path.join(destDir, `splash_logo${scale}.png`);
+                        fs.copyFileSync(srcLogo, destFile);
+                    });
+
+                    // Create Contents.json
+                    const contents = {
+                        images: [
+                            { idiom: 'universal', filename: 'splash_logo.png', scale: '1x' },
+                            { idiom: 'universal', filename: 'splash_logo@2x.png', scale: '2x' },
+                            { idiom: 'universal', filename: 'splash_logo@3x.png', scale: '3x' }
+                        ],
+                        info: { author: 'xcode', version: 1 }
+                    };
+                    fs.writeFileSync(path.join(destDir, 'Contents.json'), JSON.stringify(contents, null, 2));
+
+                    hasLogo = true;
+                    console.log('✅ Copied: splash_logo');
+                }
+            }
+
+            // 6. Create NEW LaunchScreen.storyboard
+            const storyboard = createStoryboard(hasImage, hasLogo, pluginConfig.backgroundColor);
+            const storyboardPath = path.join(iosPath, projectName, 'LaunchScreen.storyboard');
+            fs.writeFileSync(storyboardPath, storyboard);
+
+            console.log('✅ Created: LaunchScreen.storyboard');
+            console.log(`   Background: ${hasImage ? 'splash_image ✓' : 'color only'}`);
+            console.log(`   Logo: ${hasLogo ? 'splash_logo ✓' : 'none'}`);
+            console.log(`   Color: ${pluginConfig.backgroundColor}\n`);
+
+            return config;
+        },
+    ]);
+}
+
+function createStoryboard(hasImage, hasLogo, bgColor) {
+    const color = bgColor.replace('#', '');
+    const r = parseInt(color.substr(0, 2), 16) / 255;
+    const g = parseInt(color.substr(2, 2), 16) / 255;
+    const b = parseInt(color.substr(4, 2), 16) / 255;
+
+    const bgImageView = hasImage ? `
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splash_image" translatesAutoresizingMaskIntoConstraints="NO" id="bgImg">
+                    <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+                </imageView>` : '';
+
+    const logoImageView = hasLogo ? `
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splash_logo" translatesAutoresizingMaskIntoConstraints="NO" id="logoImg">
+                    <rect key="frame" x="132" y="348" width="150" height="150"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="150" id="logoW"/>
+                        <constraint firstAttribute="height" constant="150" id="logoH"/>
+                    </constraints>
+                </imageView>` : '';
+
+    const bgConstraints = hasImage ? `
+                <constraint firstItem="bgImg" firstAttribute="top" secondItem="view" secondAttribute="top"/>
+                <constraint firstItem="bgImg" firstAttribute="leading" secondItem="view" secondAttribute="leading"/>
+                <constraint firstItem="bgImg" firstAttribute="trailing" secondItem="view" secondAttribute="trailing"/>
+                <constraint firstItem="bgImg" firstAttribute="bottom" secondItem="view" secondAttribute="bottom"/>` : '';
+
+    const logoConstraints = hasLogo ? `
+                <constraint firstItem="logoImg" firstAttribute="centerX" secondItem="view" secondAttribute="centerX"/>
+                <constraint firstItem="logoImg" firstAttribute="centerY" secondItem="view" secondAttribute="centerY"/>` : '';
+
+    const resources = [];
+    if (hasImage) resources.push('        <image name="splash_image" width="1242" height="2688"/>');
+    if (hasLogo) resources.push('        <image name="splash_logo" width="512" height="512"/>');
+
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_1" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="view">
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>${bgImageView}${logoImageView}
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="safeArea"/>
+                        <color key="backgroundColor" red="${r}" green="${g}" blue="${b}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>${bgConstraints}${logoConstraints}
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+${resources.join('\n')}
+    </resources>
+</document>`;
+}
+
+module.exports = withCustomiOSSplash;