CODEWITHSUNDEEP
iosangularnativescript
buvi
buvi

Reputation: 163

white screen displayed after splashscreen in nativescript ios

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.

Upvotes: 2

Views: 1608

Answers (5)

Tiago A.
Tiago A.

Reputation: 2586

For this to work on Android {N}7 too, do:

frame.ns-root {
    background-color: black;
}

Upvotes: 0

KAKHA13
KAKHA13

Reputation: 305

I am using frames and i found solution to make Frame background same as Splash screen

Frame {
    background:#4285F4;
}

Upvotes: 0

Lucas van Dongen
Lucas van Dongen

Reputation: 9868

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.

Upvotes: 2

Gabito Esmiapodo
Gabito Esmiapodo

Reputation: 120

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.

Upvotes: 0

moritz.vieli
moritz.vieli

Reputation: 1807

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;
}

Upvotes: 0

Related Questions