Webpacked app shows blank screen on iOS after splash screen

[YvesCandel]

The issue:

If we build our app for iOS using webpack, the app will briefly show a blank screen after the splash screen. If your app is extremely lightweight and you're using an emulator, you won't notice this, but if you run it on an iPhone 5 and your app has a bit of stuff included, you will be staring at this empty screen for several seconds.

We aligned our splash screen with our login screen, so it seamlessly transitions into the login screen which looks very neat. But if we use webpack, this transition is interrupted with a blank screen.

What could be the cause of this?

Steps to reproduce

I've forked the nativescript-sdk-examples-ng repository and included a delay in the AppComponent constructor, this is the best way to reproduce. The "release" branch seems to be the default, but make sure you're on the right branch for my commit. (https://github.com/YvesCandel/nativescript-sdk-examples-ng)

git clone https://github.com/YvesCandel/nativescript-sdk-examples-ng
cd nativescript-sdk-examples-ng
npm install

So if you now run it without webpack:

tns run ios

It will transition smoothly from the splash screen to the list of examples.

But if you run it with webpack:

npm run start-ios-bundle

You'll notice that the splash screen is briefly visible, a white blank screen after that (for 5 seconds, which is the delay I've built in) and then the list of examples shows.

This only happens on iOS and only with webpack builds. I've tried looking at the output code in the platforms folder to find any differences, but wasn't able to find any.

Does anyone have any suggestions as to why this is happening?

[NickIliev]

Hey, @YvesCandel I've just tested the WebPack with nativescript-sdk-examples-ng application but was not able to reproduce the white screen issue you are describing. I've used iOS 10.2 simulator iPhone 6 and on my side, after the splash screen the application goes to its main page.

Can you please verify that you are still experiencing this one and if so please let us know what device you are testing (iOS version, device or simulator, etc.)

[YvesCandel]

Thanks for the reply @NickIliev , I'm using NativeScript 2.5.4, an iOS 10.3 simulator using an iPhone 6, but we have the same problem on a real device iPhone 5 and 6S Plus (at least). So it seems fairly independent of which iOS version or device you're using.

We're also using [email protected], if that makes any difference. But it was nice to see I could reproduce the issue easily with the fork of nativescript-sdk-examples. I will give that another try.

[YvesCandel]

Are you sure you've tried my incredibly ugly AppComponent hack to delay the constructor?

https://github.com/YvesCandel/nativescript-sdk-examples-ng/blob/a15fe51f33741863f007db13859d515c788a5ad2/app/app.component.ts

[NickIliev]

@YvesCandel I saw that you are explicitly creating a delay in your component's constructor perhaps to simulate online API call. Yet waiting for fethed information is common scenario - maybe using an activity indicator on your main page is a better approach than waiting for the data in your constructor.

[YvesCandel]

@NickIliev, the problem is that the main page doesn't show until the blank screen is done. Also, we're not waiting for any API call, we're simply waiting for the app to start. The delay simulates a slower device like an iPhone 5...

[kmuthukrishnan]

Hi @NickIliev , we are facing the same problem both on android and ioS. Any suggestions would be appreciated.
Hi @YvesCandel, Did you manage to resolve this problem. Please do share your solution.

[YvesCandel]

@kmuthukrishnan We have not been able to find a solution to the problem so far.

[CristianHCol]

Hi,
Any solution? i have the same issue in my app.

iam using:
"nativescript-angular": "~4.4.1"
"tns-core-modules": "^3.3.0"
tns version: 3.3.1

[YvesCandel]

This seems to be known as a "Flash of unstyled content" in the NativeScript community and you can apparently prevent it by matching the style of the Page object in your application to your splash screen... however, considering the complexity of the splash screen in one of my apps that's quite impossible with only a bit of CSS.

Also described in this blog near the bottom: https://www.nativescript.org/blog/deep-dive-into-nativescript-3.1-performance-improvements

[YvesCandel]

This has been fixed: NativeScript/nativescript-angular#1103