Standalone builds load poorly

[sonaye]

After pushing a standalone app to TestFlight and the App Store, I noticed a glitch when the app first opens.

Here is how the app opens:

Notice also that there is a spinner showing before my app loading screen itself:

Here is how the app should open:

My guess is that this is caused by setting the hide-made-with-expo flag to true, resulting a white screen and a white washed loading from app icon transition, which shouldn't be the case I think to improve UX and the general feel of the app from the first run.

Solution

const solution = async (hideMadeWithExpo = true) => {
  if (hideMadeWithExpo) {
    await removeWhiteScreen(); // or removeMadeWithExpoScreen()
    await removeSpinnerAfterWhiteScreen();
    showCustomAppLoadingScreen({
      properTransitionFromAppIcon = true
    });
  }
};

[sonaye]

Adding an option to hide the loading spinner in the custom loading screen would be great too <AppLoading spinner={require('./expo.json').loading.spinner} />.

[anp]

cc @terribleben

[sonaye]

any comments on this @terribleben?

[terribleben]

Nope, thanks for your suggestions!

[sonaye]

I take it you plan to work on this? any time soon, by sdk 17 maybe?

[terribleben]

Changing this behavior would be a significant architectural change to the way we build standalone apps, so probably not soon, but it's something we'd like to improve when we get the bandwidth.

[sonaye]

The white splash screen and the activity indicator are pure js/react views though. I am digging in the expo code base as we speak to see where exactly is this happening, maybe you can help me get there faster?

[sonaye]

maybe here https://github.com/expo/expo/blob/master/js/ExponentApp.ios.js#L36-L44?

[sonaye]

I am trying to build the expo client from source -as described here- to see if modifying that piece of code would do the job, or possibly some other snippets if this one won't do it, but I am getting a failed build, possibly due to cd tools-public; ./generate-files-ios.sh; cd ..:

Project root: /Users/a/Desktop/expo/js. Url: exp://localhost:80.
Error: connect ECONNREFUSED 127.0.0.1:80
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
[09:33:05] Finished 'generate-dynamic-macros' after 217 ms

[sonaye]

Error in xcode: /Users/a/Desktop/expo/ios/Exponent/ReactAppManager/EXReactAppManager.m:14:9: 'React/RCTDevLoadingView.h' file not found

[sonaye]

Never mind, I didn't exp start --lan in the js directory, still working it out.

[sonaye]

I followed the instruction exactly, but still no luck.

in ./ios/Exponent/ReactAppManager/EXReactAppManager.m

[jesseruder]

@sonaye I'm going to close this in favor of the new issue #125 you opened since they're very similar

[sonaye]

@jesseruder They are separate matters although one solution could solve both of them.

Addressing the white screen issue is actually much more important than allowing more control over the loading component, we can still get a decent ux with the current app loading component, but the white screen? it's really bad ux, especially for apps that start up with a non-white screen.

[sonaye]

Kindly reopen this issue, I don't think it should be marked as solved or closed, it's just too important.

[terribleben]

Hi, thanks for your continued feedback. We'd like to implement a way to allow better control over the way experiences load, and that would include both standalone and non-standalone experiences. As you've discovered, this is implemented natively, since the React Native bridge is not running yet in any of those circumstances. So it makes sense for us to track this as a single issue, and it's also why this is a nontrivial change. Feel free to amend the title of the other issue if you think it's not descriptive of this whole situation.

[sonaye]

I think I understand where you are going with this now better, one issue it is.

[jesseruder]

Thanks @sonaye. We're just trying to keep our issues clean. Feel free to add more information to the other issue.

[cseelus]

After opening the first Testflight build made with Expo, I also noticed that it looks glitchy.

I understand this is not trivial, but especially if your Splash Screen is not white, it currently looks suboptimal.

Any chance this gets fixed in the foreseeable future?

@sonaye Did you manage to circumvent the white loader somehow?

[Elijen]

@sonaye Have you managed to hack the client so the white screen does not appear after Splash and before Loading screen? I have also figured out that the white screen is already a React Native view, but didn't know where exactly is it coming from.

[sonaye]

@cseelus @Elijen Unfortunately I wasn't able to find a work around, the best approach up to this moment for me was to make both the app loading component and the first screen in the app white. Also the typical ios .xib that we see in a vanilla react-native init app is not present when ejecting from expo, tis file is responsible for the splash screen, I don't have the knowledge yet in that area to play around with it. That being said, according to https://expo.canny.io/feature-requests/p/improved-splash-screen-api, we should see a new API that addresses all of this, if not in sdk 20 it will be in sdk 21 I am guessing.

[Elijen]

@sonaye I was able to change the splash screen in the General settings of the iOS project (it's called Launch Images there), but the white screen displayed is not part of it. It's a react-native view (RCTView) that shows up AFTER the splash screen but BEFORE the loading screen.

Yup, seems I'll wait for the new API or try to use https://github.com/crazycodeboy/react-native-splash-screen

[sonaye]

I think you need to rebuild the expo client for that, this is what I was trying to do when I first opened this issue, but failed, after you rebuild it try #112 (comment).

[sonaye]

Or maybe this file is exposed after ejecting, I can't recall if that was the case when I tested it.

[Elijen]

@sonaye I think expo/js/ExponentApp.ios.js is not even present in a standalone app or at least I couldn't find it anywhere. I think it's just part of the Expo Client app. I might be wrong he though.

Maybe @jesseruder or @terribleben can confirm.

[sonaye]

It's definitely in the expo client, which you need to build from source, I just failed to compile it at the time.

[terribleben]

We'll have an experimental feature in SDK 20 (iOS only) which will customize the native loading XIB when you build a standalone app. (no ExpoKit required.) However, we have a lot more work to do before it's non-experimental: There are still some white flashes. As mentioned in this thread, we'd like to make it so the whole thing is seamless.

At the moment, we expect to continue work on this project and release an improved version in SDK 21 (unless plans change for some reason).

(edit for clarity: SDK 20 isn't released at the time of this comment, but we're releasing it very soon.)