Merge pull request #35 from bamlab/splashscreen-storyboard

Handle splashscreen storyboard for iOS

Author: BenoitSerrano

README.md

@@ -33,6 +33,10 @@ You can get the list of available plugins by running `react-native -h` within yo
 - In your React Native project, `yarn link @bam.tech/react-native-make`
 - In the package.json of your React Native project, in dependencies add "@bam.tech/react-native-make" : "0.0.0"
 
+## Changes in 3.0.0
+
+Since 3.0.0, splashscreens for iOS are created via Xcode’s storyboard, so as to meet Apple's new requirements as of April 2020.
+
 ## 👉 About Bam
 
 We are a 100 people company developing and designing multiplatform applications with [React Native](https://www.bam.tech/agence-react-native-paris) using the Lean & Agile methodology. To get more information on the solutions that would suit your needs, feel free to get in touch by [email](mailto://contact@bam.tech) or through or [contact form](https://www.bam.tech/en/contact)!

docs/set-splash.md

@@ -18,7 +18,7 @@ SplashScreen.hide();
 
 - Use a `.png` to preserve background transparency
 - **3000px** as min height and/or width
-- For **cover** splashscreens, preserve a 1/3 padding  for important content to avoid clipping a Logo or Text
+- For **cover** splashscreens, preserve a 1/3 padding for important content to avoid clipping a Logo or Text
 
 ## Resize modes
 
@@ -32,14 +32,17 @@ We offer 3 types of Splashcreen image resize modes:
 
 ## Generate both splash screen
 
+- open your file `myProject.xcworkspace` in XCode
+- right-click on your project folder > "New file..." > "Launch Screen" > "Save as: SplashScreen"
 - `react-native set-splash --path <path-to-image> --resize <[contain]|cover|center> --background "<background-color>"`  
   ⚠️ The path option is mandatory.  
   The background color defaults to white
 
 ## Generate iOS splashscreen
 
-- `react-native set-splash --platform ios --path <path-to-image> --resize <[contain]|cover|center> --background ">background-color>"`  
-  ⚠️ The path option is mandatory.
+- open your file `myProject.xcworkspace` in XCode
+- right-click on your project folder > "New file..." > "Launch Screen" > "Save as: SplashScreen"
+- `react-native set-splash --platform ios --path <path-to-image>`
 
 ## Generate Android splashscreen
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bam.tech/react-native-make",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "main": "modules/index.js",
   "license": "MIT",
   "repository": {

src/modules/setSplashScreen/ios/config.ts

@@ -4,6 +4,9 @@ const iosSplashImage = {
   backgroundColor: { r: 0, g: 0, b: 0, alpha: 0 },
 };
 
+const iosStoryboardName = 'SplashScreen';
+
 export const config = {
   iosSplashImage,
+  iosStoryboardName,
 };

src/modules/setSplashScreen/ios/service.ts

@@ -2,78 +2,53 @@ import { addIosImageSetContents, EImageSetType } from '../../../services/ios/ser
 import { generateResizedAssets } from '../../../services/image.processing';
 import { config } from './config';
 import { join } from 'path';
-import {
-  applyPatch,
-  applyPatchByMatchedGroups,
-  readFile,
-  replaceInFile,
-} from '../../../services/file.processing';
+import { replaceInFile } from '../../../services/file.processing';
 import { getNormalizedRGBAColors } from '../../../services/color.processing';
 import { EResizeMode } from '../../../services/type';
 import { getIosPackageName } from '../../../utils';
 
 export const addIosSplashScreen = async (
   imageSource: string,
   backgroundColor: string,
-  resizeMode?: EResizeMode
+  resizeMode: EResizeMode
 ) => {
   try {
-    addSplashScreenXib(backgroundColor, resizeMode);
-    configureSplashScreen();
     const iosSplashImageFolder = addIosImageSetContents('SplashImage', EImageSetType.IMAGE);
     await generateIosSplashImages(imageSource, iosSplashImageFolder);
+    generateStoryboardFile(backgroundColor, resizeMode);
+    setNewSplashScreenFileRefInInfoPlist();
   } catch (err) {
     console.log(err);
   }
 };
 
-const configureSplashScreen = () => {
-  const appDelegatePath = `./ios/${getIosPackageName()}/AppDelegate.m`;
-  applyPatch(appDelegatePath, {
-    pattern: /^(.+?)(?=\#import)/gs,
-    patch: '#import "RNSplashScreen.h"\n',
-  });
-  const showRNSplashScreen = '[RNSplashScreen show];';
-  if (!readFile(appDelegatePath).includes(showRNSplashScreen)) {
-    applyPatchByMatchedGroups(appDelegatePath, {
-      pattern: /(didFinishLaunchingWithOptions.*)(\n *return YES)/gs,
-      patch: `$1\n  ${showRNSplashScreen}$2`,
-    });
-  }
-};
-
-const addSplashScreenXib = (
-  backgroundColor: string,
-  resizeMode: EResizeMode = EResizeMode.CONTAIN
-) => {
+const generateStoryboardFile = (backgroundColor: string, resizeMode: EResizeMode) => {
   const { red, green, blue, alpha } = getNormalizedRGBAColors(backgroundColor);
-
   replaceInFile(
-    join(__dirname, `../../../../templates/ios/LaunchScreen.${resizeMode}.xib`),
-    `./ios/${getIosPackageName()}/Base.lproj/LaunchScreen.xib`,
+    join(__dirname, `../../../../templates/ios/SplashScreen.${resizeMode}.storyboard`),
+    `./ios/${config.iosStoryboardName}.storyboard`,
     [
       {
-        oldContent: /{{background-rgba-red}}/g,
-        newContent: `${red}`,
-      },
-      {
-        oldContent: /{{background-rgba-green}}/g,
-        newContent: `${green}`,
-      },
-      {
-        oldContent: /{{background-rgba-blue}}/g,
-        newContent: `${blue}`,
-      },
-      {
-        oldContent: /{{background-rgba-alpha}}/g,
-        newContent: `${alpha}`,
+        oldContent: /<color.*key="backgroundColor".*\/>/g,
+        newContent: `<color key="backgroundColor" red="${red}" green="${green}" blue="${blue}" alpha="${alpha}" colorSpace="custom" customColorSpace="sRGB"/>`,
       },
     ]
   );
 };
 
+const setNewSplashScreenFileRefInInfoPlist = () => {
+  const infoPlistPath = `./ios/${getIosPackageName()}/Info.plist`;
+  const UILaunchStoryboardNamePattern = /(<key>UILaunchStoryboardName<\/key>[ \t\n]*<string>)[a-zA-Z]+(<\/string>)/g;
+  replaceInFile(infoPlistPath, infoPlistPath, [
+    {
+      oldContent: UILaunchStoryboardNamePattern,
+      newContent: `$1${config.iosStoryboardName}$2`,
+    },
+  ]);
+};
+
 const generateIosSplashImages = (imageSource: string, iosSplashImageFolder: string) => {
-  const { multipliers, size, backgroundColor } = config.iosSplashImage;
+  const { multipliers, size } = config.iosSplashImage;
   return Promise.all(
     multipliers.map(multiplier =>
       generateResizedAssets(

src/services/file.processing.ts

@@ -24,13 +24,6 @@ export const applyPatch = (
   }
 };
 
-export const applyPatchByMatchedGroups = (
-  path: string,
-  patch: { patch: string; pattern: string | RegExp }
-) => {
-  writeFileSync(path, readFileSync(path, 'utf8').replace(patch.pattern, patch.patch));
-};
-
 export const replaceInFile = (
   sourcePath: string,
   destinationPath: string,

templates/ios/LaunchScreen.center.xib

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15705" 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="15706"/>
+        <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>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
+                                <rect key="frame" x="207" y="876" width="0.0" height="0.0"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="SplashImage" translatesAutoresizingMaskIntoConstraints="NO" id="RL8-Sx-rSy">
+                                <rect key="frame" x="87" y="384" width="240" height="128"/>
+                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                            </imageView>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                    </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>
+        <image name="SplashImage" width="896" height="896"/>
+    </resources>
+</document>