apache / cordova-plugin-splashscreen

Apache Cordova Plugin splashscreen
Apache License 2.0
642 stars 640 forks source link

iOS Launch screen images do not display in emulator and required to be copied to a Xcode project folder #321

Closed zeshanb closed 2 years ago

zeshanb commented 2 years ago

I followed cordova Splashscreen documentation on cordova.apache.org.

After running the cordova command to build and emulate the app I have to manually drag images in Xcode LaunchStoryboard and run emulator in Xcode.

The Images are suppose to appear in this directory: images-need-placed-here

The Images.xcassets directory is located under resources iOS Xcode project: under-resources-xcode-project

Bare minimum only the following images were required:

The Xcode interface generates a .json file and the .json file is placed in LaunchStoryboard.imageset directory. Only few images are required. Here is a sample of the json file:

{
  "images" : [
    {
      "filename" : "default-2.png",
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "filename" : "default-568h@2x-1.png",
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "filename" : "default-portrait-736h@3x-1.png",
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "universal",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "iphone",
      "scale" : "3x",
      "width-class" : "compact"
    },
    {
      "filename" : "default-3.png",
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "filename" : "default@2x-1.png",
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x"
    },
    {
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x"
    },
    {
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "1x",
      "width-class" : "compact"
    },
    {
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "light"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    },
    {
      "appearances" : [
        {
          "appearance" : "luminosity",
          "value" : "dark"
        }
      ],
      "height-class" : "compact",
      "idiom" : "ipad",
      "scale" : "2x",
      "width-class" : "compact"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

I would appreciate if this issue can be resolved at your convenience. Thank you for your time.

Originally posted by @zeshanb in https://github.com/apache/cordova-plugin-splashscreen/issues/263#issuecomment-950393757

zeshanb commented 2 years ago

Hi there,

This is resolved in stackoverflow. Only one image is required:

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />

https://stackoverflow.com/questions/64141434/cordova-ios-6-1-1-white-splash-screen?answertab=oldest#tab-top