feat: show splash-screen

- install package @capacitor/[email protected] - update capcitor configuration - update ios podfile
Boehringer-Ingelheim · Jan 28, 2021 · c8a8954 · c8a8954
1 parent ecce884
commit c8a8954
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 2 deletions.
diff --git a/capacitor.config.json b/capacitor.config.json
@@ -4,5 +4,20 @@
   "bundledWebRuntime": false,
   "npmClient": "npm",
   "webDir": "build",
-  "cordova": {}
+  "cordova": {},
+  "plugins": {
+    "SplashScreen": {
+      "launchShowDuration": 3000,
+      "launchAutoHide": true,
+      "backgroundColor": "#ffffffff",
+      "androidSplashResourceName": "splash",
+      "androidScaleType": "CENTER_CROP",
+      "androidSpinnerStyle": "large",
+      "iosSpinnerStyle": "small",
+      "spinnerColor": "#999999",
+      "showSpinner": false,
+      "splashFullScreen": true,
+      "splashImmersive": true
+    }
+  },
 }
diff --git a/ios/App/App/capacitor.config.json b/ios/App/App/capacitor.config.json
@@ -4,5 +4,20 @@
 	"bundledWebRuntime": false,
 	"npmClient": "npm",
 	"webDir": "build",
-	"cordova": {}
+	"cordova": {},
+	"plugins": {
+		"SplashScreen": {
+			"launchShowDuration": 3000,
+			"launchAutoHide": true,
+			"backgroundColor": "#ffffffff",
+			"androidSplashResourceName": "splash",
+			"androidScaleType": "CENTER_CROP",
+			"androidSpinnerStyle": "large",
+			"iosSpinnerStyle": "small",
+			"spinnerColor": "#999999",
+			"showSpinner": false,
+			"splashFullScreen": true,
+			"splashImmersive": true
+		}
+	},
 }
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -9,6 +9,7 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
   pod 'CapacitorStorage', :path => '../../node_modules/@capacitor/storage'
 end

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@capacitor/android": "^3.0.0-beta.1",
     "@capacitor/core": "^3.0.0-beta.1",
     "@capacitor/ios": "^3.0.0-beta.1",
+    "@capacitor/splash-screen": "^0.3.1",
     "@capacitor/status-bar": "^0.4.0",
     "@capacitor/storage": "^0.3.0",
     "@ionic/react": "^5.5.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { StatusBar, Style } from '@capacitor/status-bar';
+import { SplashScreen } from '@capacitor/splash-screen';
 import {
   getPlatforms,
   IonApp,
@@ -48,6 +49,12 @@ const App: React.FC = () => {
     if (platforms.includes('capacitor')) {
       setStatusBarStyleDark();
     }
+
+    // NOTE: Current workaround to still show splash-screen until app is finally rendered
+    SplashScreen.show({
+      showDuration: 750,
+      autoHide: true,
+    });
   }, []);
 
   return (