white screen displayed after splashscreen in nativescript ios - ios

Question

There is white screen displaying after splash screen for few seconds in nativescript ios. It has been happening only for our project but sample project is working fine. I checked both simulator and iPhone 5, iPhone 6 , iPad mini ,white screen is displaying in all devices. I am using Nativescript with Angular 4, Here I included my package.json
{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "com.preludesys.calladoc",
"tns-ios": {
"version": "3.1.0"
}
},
"scripts": {
"tslint": "tslint -p tsconfig.json",
"ns-bundle": "ns-bundle",
"publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
"generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
"start-android-bundle": "npm run ns-bundle --android --run-app",
"start-ios-bundle": "npm run ns-bundle --ios --run-app",
"build-android-bundle": "npm run ns-bundle --android --build-app",
"build-ios-bundle": "npm run ns-bundle --ios --build-app"
},
"dependencies": {
"#angular/animations": "~4.1.0",
"#angular/common": "~4.1.0",
"#angular/compiler": "~4.1.0",
"#angular/core": "~4.1.0",
"#angular/forms": "~4.1.0",
"#angular/http": "~4.1.0",
"#angular/platform-browser": "~4.1.0",
"#angular/router": "~4.1.0",
"nativescript": "^3.2.0",
"nativescript-angular": "~3.0.0",
"nativescript-camera": "^3.0.1",
"nativescript-drop-down": "^3.1.0",
"nativescript-google-maps-sdk": "^2.3.2",
"nativescript-imagepicker": "^3.0.6",
"nativescript-iqkeyboardmanager": "^1.1.0",
"nativescript-loading-indicator": "^2.3.2",
"nativescript-phone": "^1.3.1",
"nativescript-ripple": "^2.0.0",
"nativescript-telerik-ui": "^3.0.4",
"nativescript-theme-core": "~1.0.2",
"nativescript-unit-test-runner": "^0.3.4",
"nativescript-xml2js": "^0.5.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.3.0",
"tns-core-modules": "^3.1.1",
"zone.js": "~0.8.2"
},
"devDependencies": {
"#angular/compiler-cli": "~4.1.0",
"#ngtools/webpack": "^1.3.0",
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.17.1",
"codelyzer": "^3.0.1",
"copy-webpack-plugin": "~4.0.1",
"extract-text-webpack-plugin": "~2.1.0",
"filewalker": "^0.1.3",
"jasmine-core": "^2.6.2",
"karma": "^1.7.0",
"karma-jasmine": "^1.0.2",
"karma-nativescript-launcher": "^0.4.0",
"lazy": "1.0.11",
"nativescript-css-loader": "~0.26.0",
"nativescript-dev-typescript": "~0.4.0",
"nativescript-dev-webpack": "next",
"raw-loader": "~0.5.1",
"resolve-url-loader": "~2.0.2",
"tslint": "^5.4.2",
"typescript": "~2.2.1",
"webpack": "~2.6.1",
"webpack-bundle-analyzer": "^2.8.2",
"webpack-sources": "~1.0.1",
"nativescript-worker-loader": "~0.8.1"
}
}
i dont know what is the issue and how can i fix it. so please j=help me.

Answer 1

You should repeat the layout of your boot screen or a slightly different version of it (with a spinner and loading... message) hard coded that gets removed or drawn over once the app is actually loaded. This will give a smooth and professional looking transition between the boot screen and the loaded application.

Answer 2

This short "splash after the splashscreen" appears on iOS during the load of the initial page.
You cannot avoid it. However, you can change the color in your global CSS file with this code:
Page {
background-color: black;
}

Answer 3

In our apps this white screen becomes more prominent after adding a few "heavy" plugins, as nativescript-telerik-ui, nativescript-google-maps-sdk, etc.
It happens on old (slow) Android devices, too.
It seems it is unavoidable, which is a shame, really. One thing you could try is to optimize the loading time with Webpack, lazy loading, etc., so the app loads faster.
It also is recommended to change the Page background color programmatically on boot.

Answer 4

I am using frames and i found solution to make Frame background same as Splash screen
Frame {
background:#4285F4;
}

Answer 5

For this to work on Android {N}7 too, do:
frame.ns-root {
background-color: black;
}