Capacitor App Screenshop

capscreen.md

1. Install npm install --save-dev @capacitor/assets

2. In your app root create assets folder and add the following

assets/
- logo.png
- splash-dark
- splash

Note: Logo size should be 1024 × 1024 and splash size = 2732 × 2732

3. Run the command below to generate resource for android or iOS. Feel free to change the hex codes to your prefered colors.

npx capacitor-assets generate --android --iconBackgroundColor '#e1ffe2' --iconBackgroundColorDark '#02100d' --splashBackgroundColor '#e1ffe2' --splashBackgroundColorDark '#02100d'

npx capacitor-assets generate --ios --iconBackgroundColor '#ffffff' --iconBackgroundColorDark '#000000' --splashBackgroundColor '#ffffff' --splashBackgroundColorDark '#000000'

4. In capacitor.config.ts file add the followning

plugins: {
    SplashScreen: {
      launchShowDuration: 3000,
      launchAutoHide: false,
      showSpinner: false,
      splashFullScreen: true,
      splashImmersive: true,
    },
  }

5. In your app component install and import

import { SplashScreen } from "@capacitor/splash-screen";

If you're using react run this function on component initialization. On angular adapt and run ngOnInit

export const hideSplash = async () => {
  await SplashScreen.hide();
};