Splash screen resize mode

[gieerzetka]

Hi,

I have made splashscreen according to your guide:

https://docs.expo.io/versions/latest/guides/splash-screens.html

part of mine app.json

"sdkVersion": "24.0.0",
"splash": {
      "image": "./assets/img/splashscreen.png",
      "resizeMode": "contain"
}

and yet, image at standalone android splash seems being not “contained” (loader in expo app is workng good).

Expo 24

I attach screenshot from my device:

[jesse]

Hi @gieerzetka! Can you explain what you were expecting to see? It’s hard to tell without seeing the source asset but that looks like “contain” to me.

[gieerzetka]

oh, ye, I should send it… ok, so orginal file looks like that:

When I open app with Expo it looks great:

but on Android device (samsung galaxy s8):

[aalices]

Cześć Grzegorz!
You need to also take a look at Android’s dpi stuff (we mention it here https://docs.expo.io/versions/latest/guides/splash-screens.html#customizing-the-configuration-for-ios-and-android ) . If you’re using a picture that is 981px it might be just too small for S8 screen. You need to configure pictures for various dpis and for the highest ones the picture needs to be quite big. This could be a nice cheatsheet: png - Android splash screen image sizes to fit all devices - Stack Overflow

[gieerzetka]

Hej Alicja

I’ve shrinked image before uploading to this forum. Orginal one is 1242px wide and 2436px tall, I used dimennsions form expo splash docs (width of iphone s8 and height of iphone X), do you think it could be still to small? I thought contain option would resize image to fit in every screen, and screenshot from my device shows it does not work…

[aalices]

Can you try adding following configuration to you app.json ?

"android": {
  "splash": {
    "xhdpi": "./assets/img/splashscreen.png",
    "xxhdpi": "./assets/img/splashscreen.png",
    "xxxhdpi": "./assets/img/splashscreen.png"
  },
  "package": // blahblahblah......
}

[gieerzetka]

"splash": {
        "backgroundColor": "#ffffff",
        "ldpi": "./assets/img/splashscreen.png",
        "mdpi": "./assets/img/splashscreen.png",
        "hdpi": "./assets/img/splashscreen.png",
        "xhdpi": "./assets/img/splashscreen.png",
        "xxhdpi": "./assets/img/splashscreen.png",
        "xxxhdpi": "./assets/img/splashscreen.png",
        "resizeMode": "contain"
      }

Gaves me: