fix: fix splash screen aspect ratio issue

capacitor.config.ts

@@ -5,6 +5,16 @@ const config: CapacitorConfig = {
   appName: 'KlikDarurat',
   webDir: 'build',
   bundledWebRuntime: false,
+  plugins: {
+    SplashScreen: {
+      launchAutoHide: false,
+      androidSplashResourceName: 'splash',
+      androidScaleType: 'CENTER_CROP',
+      splashFullScreen: true,
+      splashImmersive: false,
+      backgroundColor: '#384e78',
+    },
+  },
 };
 
 export default config;

package.json

@@ -20,6 +20,7 @@
     "@capacitor/geolocation": "^1.1.3",
     "@capacitor/haptics": "1.1.3",
     "@capacitor/keyboard": "1.1.3",
+    "@capacitor/splash-screen": "^1.1.6",
     "@capacitor/status-bar": "1.0.6",
     "@ionic/pwa-elements": "^3.0.2",
     "@ionic/react": "^5.5.0",

src/App.tsx

@@ -1,5 +1,7 @@
+import { useEffect } from 'react';
 import { IonApp, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
+import { SplashScreen } from '@capacitor/splash-screen';
 
 import Routes from 'components/routes/Routes';
 import SideMenu from 'components/SideMenu';
@@ -24,15 +26,23 @@ import '@ionic/react/css/display.css';
 import 'theme/variables.css';
 import 'theme/customTheme.css';
 
-const App: React.FC = () => (
-  <IonApp>
-    <IonReactRouter>
-      <IonSplitPane contentId="main">
-        <SideMenu />
-        <Routes />
-      </IonSplitPane>
-    </IonReactRouter>
-  </IonApp>
-);
+const App: React.FC = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      SplashScreen.hide({ fadeOutDuration: 300 });
+    }, 100);
+  }, []);
+
+  return (
+    <IonApp>
+      <IonReactRouter>
+        <IonSplitPane contentId="main">
+          <SideMenu />
+          <Routes />
+        </IonSplitPane>
+      </IonReactRouter>
+    </IonApp>
+  );
+};
 
 export default App;