react-native-custom-splash 2.0.2 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-custom-splash",
-    "version": "2.0.2",
+    "version": "2.1.1",
     "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,7 +8,6 @@ const {
 } = require('@expo/config-plugins');
 const path = require('path');
 const fs = require('fs');
-const { generateImageAsync } = require('@expo/image-utils');
 
 /**
  * Validate and normalize plugin configuration
@@ -355,20 +354,107 @@ const withSplashScreenAndroid = (config, pluginConfig) => {
     return config;
 };
 
+/**
+ * Create LaunchScreen.storyboard with splash configuration
+ */
+function createLaunchScreenStoryboard(hasImage, hasLogo, backgroundColor) {
+    const bgColor = backgroundColor.replace('#', '');
+    const r = parseInt(bgColor.substr(0, 2), 16) / 255;
+    const g = parseInt(bgColor.substr(2, 2), 16) / 255;
+    const b = parseInt(bgColor.substr(4, 2), 16) / 255;
+
+    const imageViewXML = hasImage ? `
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splash_image" translatesAutoresizingMaskIntoConstraints="NO" id="splashBgImage">
+                    <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+                </imageView>` : '';
+
+    const logoViewXML = hasLogo ? `
+                <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="splash_logo" translatesAutoresizingMaskIntoConstraints="NO" id="splashLogo">
+                    <rect key="frame" x="132" y="348" width="150" height="150"/>
+                    <constraints>
+                        <constraint firstAttribute="width" constant="150" id="logoWidth"/>
+                        <constraint firstAttribute="height" constant="150" id="logoHeight"/>
+                    </constraints>
+                </imageView>` : '';
+
+    const imageConstraints = hasImage ? `
+                <constraint firstItem="splashBgImage" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="bgTop"/>
+                <constraint firstItem="splashBgImage" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="bgLeading"/>
+                <constraint firstItem="splashBgImage" firstAttribute="trailing" secondItem="Ze5-6b-2t3" secondAttribute="trailing" id="bgTrailing"/>
+                <constraint firstItem="splashBgImage" firstAttribute="bottom" secondItem="Ze5-6b-2t3" secondAttribute="bottom" id="bgBottom"/>` : '';
+
+    const logoConstraints = hasLogo ? `
+                <constraint firstItem="splashLogo" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="logoCenterX"/>
+                <constraint firstItem="splashLogo" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="logoCenterY"/>` : '';
+
+    const imageResources = [];
+    if (hasImage) imageResources.push('<image name="splash_image" width="1242" height="2688"/>');
+    if (hasLogo) imageResources.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>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>${imageViewXML}${logoViewXML}
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
+                        <color key="backgroundColor" red="${r}" green="${g}" blue="${b}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>${imageConstraints}${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>${imageResources.join('\n        ')}
+    </resources>
+</document>`;
+}
+
 /**
  * Plugin to configure iOS splash screen
  */
 const withSplashScreenIOS = (config, pluginConfig) => {
-    return withDangerousMod(config, [
+    // Step 1: Update Info.plist to use our LaunchScreen
+    config = IOSConfig.InfoPlist.withInfoPlist(config, (config) => {
+        // Set our LaunchScreen as the launch storyboard
+        config.modResults.UILaunchStoryboardName = 'LaunchScreen';
+
+        // Remove Expo's default splash screen configuration
+        delete config.modResults.UILaunchScreen;
+
+        return config;
+    });
+
+    // Step 2: Create our custom LaunchScreen.storyboard and copy images
+    config = withDangerousMod(config, [
         'ios',
         async (config) => {
             const projectRoot = config.modRequest.projectRoot;
             const iosProjectPath = config.modRequest.platformProjectRoot;
             const projectName = config.modRequest.projectName;
 
+            let hasImage = false;
+            let hasLogo = false;
+
             // Copy images to iOS assets
             if (pluginConfig.image) {
-                await copyImageToIOS(
+                hasImage = await copyImageToIOS(
                     projectRoot,
                     pluginConfig.image,
                     'splash_image',
@@ -378,7 +464,7 @@ const withSplashScreenIOS = (config, pluginConfig) => {
             }
 
             if (pluginConfig.logo) {
-                await copyImageToIOS(
+                hasLogo = await copyImageToIOS(
                     projectRoot,
                     pluginConfig.logo,
                     'splash_logo',
@@ -387,9 +473,42 @@ const withSplashScreenIOS = (config, pluginConfig) => {
                 );
             }
 
+            // Create LaunchScreen.storyboard
+            const launchScreenPath = path.join(
+                iosProjectPath,
+                projectName,
+                'LaunchScreen.storyboard'
+            );
+
+            const storyboardContent = createLaunchScreenStoryboard(
+                hasImage,
+                hasLogo,
+                pluginConfig.backgroundColor
+            );
+
+            fs.writeFileSync(launchScreenPath, storyboardContent);
+
+            // Remove SplashScreenLegacy if it exists (from Expo's default splash)
+            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('✅ iOS LaunchScreen.storyboard created with YOUR images!');
+            console.log('✅ Info.plist configured to use LaunchScreen');
+
             return config;
         },
     ]);
+
+    return config;
 };
 
 /**
@@ -407,8 +526,6 @@ module.exports = (config, props = {}) => {
         pluginConfig = getPluginConfig(config);
     }
 
-    console.log('✅ react-native-custom-splash configured with:', pluginConfig);
-
     return withPlugins(config, [
         [withSplashScreenAndroid, pluginConfig],
         [withSplashScreenIOS, pluginConfig],