Skip to content

ionic resources should generate iPhone X splash screens #2904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
matthewlloyd opened this issue Dec 1, 2017 · 8 comments
Closed

ionic resources should generate iPhone X splash screens #2904

matthewlloyd opened this issue Dec 1, 2017 · 8 comments

Comments

@matthewlloyd
Copy link

matthewlloyd commented Dec 1, 2017

The following two lines need to be added to packages/ationic/cli-utils/lib/cordova/resources.js in RESOURCES.ios.splash.images to generate the splash screen images for iPhone X. Otherwise, a white bar appears at the bottom of the screen underneath the splash screen on app launch.

{ name: 'Default-2436h.png', width: 1125, height: 2436, orientation: 'portrait' },
{ name: 'Default-Landscape-2436h.png', width: 2436, height: 1125, orientation: 'landscape' },
@imhoffd
Copy link
Contributor

imhoffd commented Dec 1, 2017

@matthewlloyd I'm not seeing this on the iPhone X simulator. I believe it uses Default@2x~universal~anyany.png.

This is likely related to this issue: ionic-team/ionic-v1#331

Have you tried cordova-ios 4.5.4?

@matthewlloyd
Copy link
Author

Yes, I'm seeing this with cordova-ios 4.5.4.

Note that the latest cordova-ios iOS project template expects the 2436h files to exist:

https://github.com/apache/cordova-ios/blob/master/bin/templates/project/PROJECT_NAME/Images.xcassets/LaunchImage.launchimage/Contents.json

and that cordova does not generate the relevant .png files, the ionic CLI should do so.

@mhartington
Copy link
Contributor

The resources generator generates a launch image that is used for iPhone X and iPad Pro resolutions. The universal-anyany key means that the image will be used anywhere and will be properly scaled.

@matthewlloyd
Copy link
Author

Steps to reproduce:

  1. Create a new ionic app project: ionic start testapp blank
  2. Add ios as a platform: ionic cordova platform add ios
  3. Open platforms/ios/testapp.xcworkspace in Xcode.
  4. Navigate to Resources/Images.xcassets and select LaunchImage.
  5. Observe that the iPhone X portrait and landscape launch images are missing.

Package versions:

macbook-pro-2:testapp mil$ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.3
    Node       : v6.10.2
    npm        : 3.10.10
    OS         : macOS High Sierra
    Xcode      : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

screen shot 2017-12-18 at 6 28 16 pm

@matthewlloyd
Copy link
Author

Since you have prematurely closed this issue, I will create another.

@aaronneon2
Copy link

aaronneon2 commented Dec 19, 2017

I think contributors should reopen this issue and generate Default-2436h.png & Default-Landscape-2436h.png image assets because the universal splash asset doesn't display nicely on iPhone6 that are running iOS 11. The aspect ratio is maintained but I have my logo so big right in the center that it feels like right-in-the-face for my users.

Generating the required asset will have the splash asset in the proper dimensions.

@aaronneon2
Copy link

Just an update on this issue. To fix my issue with the big splash image, I had to comment out the universay-anyany splash entry in config.xml to prevent my test iPhone6 running iOS 11 to use the universal splash image. Then I manually create a Default-2436h.png splash image and included it in config.xml since ionic resource generator does not provide it.

@ogezue
Copy link

ogezue commented Mar 5, 2018

I don't have the impression that Ionic is useful for professional apps.

@ionic-team ionic-team locked and limited conversation to collaborators Mar 5, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants