Explain new splash-api?

Expo SDK
1

What kind of properties and can i use here for the “image” and the following “ios”-image?

So currently i have

    "loading": {
      "icon": "./assets/icons/appicon-transparent-512.png",
      "hideExponentText": true,
      "splash": {
        "backgroundColor": "#4CAF50".
        "image": //needHelpHere:(
      }
    },

So i’m having my green background now but my icon is not showing anymore (as it was in SDK19).

It seems like I just need some explaination :innocent:

2

@shuffgy hey welcome to Expo, glad you’re using our product.

Check this out: https://github.com/expo/expo/blob/ae3d137e5128fd6ab8a37e042f628ad3e4285ee1/js/Browser/BrowserScreen.js - Here is how “splash” is being used in side of our codebase. Hopefully seeing this will remove the mystery around how it works.

For what you need, you can see this code snippet

// Don't use loading icon if new manifest.loading.splash.image.ios.backgroundImageUrl is set
if (this._isNewSplashScreenStyle(manifest)) {
  return (
    // This view is empty, but positions the loading indicator corrextly
    <View style={{ width: 200, height: 200, marginVertical: 16 }} />
  );
}

So all you need to do is specify

{
    "image" {
         "ios": {
             "backgroundImageUrl": <string>
         }
    }
}

Let me know if you have any other questions :slight_smile: sorry about the confusion.

3

So the reason why my icon was not showing up is, that “splash” overwrites the “loading”-stuff.
But why do you use these two, if i can only use a backgroundColor or (on iOS) a backgroundImage for splash?

To get rid of the fading icon on SDK19 i was already using only a backgroundImage.
Now the icon is not fading anymore and i have to options: setting the icon on loading or still use my backgroundImage for splash (but only iOS).

I dont see any benefits of using splash. Just like him. Can you give me another hint?

Sorry :sweat_smile::innocent:

4

Oh no worries, don’t need to apologize you have a good point! If you have a good idea of how it should work instead of how we built it, we would really appreciate the feedback :slight_smile: It seems like a nice to have since all it does is:

This API generates a launch screen xib from your configuration under the splash key in app.json, so the launch screen loads immediately and works the same as other iOS apps.

Right now it is experimental and we’ll improve on its functionality over time. :smiley: hope that helps.

5

Thank you for your help!

Dont know if this is a good idea or not but…
My idea was like “splash” does the actual Splashscreen. So

  • choose Icon
  • choose BackgroundColor or image
  • choose style of Statusbar (really, i need this in hidden or white… :innocent:)
  • hide spinner on ios too
  • maybe different settings for iOS and android

and the “loading” just uses these settings too and you can turn on or off some developer-settings like “hideExponentText” or “showDownloadInfos” with “true, false, on top or bottom” and exponentIconColor and that kind of things.

so it would look like this maybe?

    "loading": {
      //"exponentIconColor": "white",
      "hideExponentText": true,
      "splash": {
        "backgroundcolor": "#4CAF50",
        "icon": "./assets/icons/appicon-transparent-512.png",
        //"backgroundImage": "./assets/img/splashscreenbackground.png",
        "statusBarStyle": "light-content" // *idea: light-content, dark-content, hidden
      }
    }

I already finished my very first app and just wanted to update it to the new SDK. If i have some time, i will post it in the Cheer-category :slight_smile:

1 Like
6

@shuffgy excited about your new app. Congrats :smiley:

This is good feedback. Thanks a ton!!