Nativescript: White flash before app load on ios

[anshul]

Tell us about the problem

There is a white flash before the app loads on ios.

When you create a project with tns create project --ng and run the default app that is created there is a white flash before app load on ios. On android the app loads without any such visual problem.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.2
• Cross-platform modules: 2.4.4
• Runtime(s): tns-ios: 2.4.0, tns-android: 2.4.1
• Plugin(s): -

Please tell us how to recreate the issue in as much detail as possible.

To recreate the issue, tns create project --ng to generate a fresh project. Change the background color of the app component to the same as the splash screen. Then run tns run ios and observe a brief flash of white between the splash exit and app load. Run tns run android to see a completely smooth transition.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Output of tns create followed by change of background color -
https://github.com/anshul/nativescript-launch-issue

[tsonevn]

Thank you for reporting this issue.

I reviewed your case and found that the problem could be related with the delay with loading the component in NativeScript Angular 2 project. To be able to change this white color, which has been seen after the disappearing splash screen, you could set in your app.css file Page backgroundColor to be #272734. I am providing sample code below:

app.css

Page{
   background-color:#272734;
}

Let me know whether this helps or if I could assist you further.

[anshul]

@tsonevn Thanks! This workaround does do the job.

[dimitriospafos]

@tsonevn this works except on iphone x where the top actionbar/"safe area" still stays white. Any workaround for that?

[tsonevn]

HI @dimitriospafos,
Can you provide sample project or at least some code snippets, which can be used for debugging the issue?

[dimitriospafos]

I set the margin to -44 in app.css and it seems like it’s working.

Thank you for your time.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.