fix-next(iOS): set root viewe css classes before setup UI (#8005)

vchimev · manoldonev · commit beca1c882815 · 2019-10-24T10:15:03.000+03:00
At application launch, `ns-root` class is not set when loading the theme.
diff --git a/nativescript-core/application/application.ios.ts b/nativescript-core/application/application.ios.ts
@@ -22,8 +22,7 @@ import { Builder } from "../ui/builder";
 import {
     CLASS_PREFIX,
     getRootViewCssClasses,
-    pushToRootViewCssClasses,
-    resetRootViewCssClasses
+    pushToRootViewCssClasses
 } from "../css/system-classes";
 
 import { ios as iosView, View } from "../ui/core/view";
@@ -308,7 +307,7 @@ class IOSApplication implements IOSApplicationDefinition {
             this._window.makeKeyAndVisible();
         }
 
-        setupRootViewCssClasses(rootView);
+        setRootViewSystemAppearanceCssClass(rootView);
         rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => {
             const userInterfaceStyle = controller.traitCollection.userInterfaceStyle;
             const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@@ -356,6 +355,8 @@ function createRootView(v?: View) {
         }
     }
 
+    setRootViewCssClasses(rootView);
+
     return rootView;
 }
 
@@ -398,7 +399,7 @@ export function _start(entry?: string | NavigationEntry) {
 
                     // Mind root view CSS classes in future work
                     // on embedding NativeScript applications
-                    setupRootViewCssClasses(rootView);
+                    setRootViewSystemAppearanceCssClass(rootView);
                     rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => {
                         const userInterfaceStyle = controller.traitCollection.userInterfaceStyle;
                         const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@@ -482,22 +483,24 @@ function setViewControllerView(view: View): void {
     }
 }
 
-function setupRootViewCssClasses(rootView: View): void {
-    resetRootViewCssClasses();
-
+function setRootViewCssClasses(rootView: View): void {
     const deviceType = device.deviceType.toLowerCase();
     pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
     pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
     pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
 
-    if (majorVersion >= 13) {
-        pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.systemAppearance}`);
-    }
-
     const rootViewCssClasses = getRootViewCssClasses();
     rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));
 }
 
+function setRootViewSystemAppearanceCssClass(rootView: View): void {
+    if (majorVersion >= 13) {
+        const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`;
+        pushToRootViewCssClasses(systemAppearanceCssClass);
+        rootView.cssClasses.add(systemAppearanceCssClass);
+    }
+}
+
 export function orientation(): "portrait" | "landscape" | "unknown" {
     return iosApp.orientation;
 }
diff --git a/nativescript-core/css/system-classes.d.ts b/nativescript-core/css/system-classes.d.ts
@@ -28,8 +28,3 @@ export function pushToRootViewCssClasses(value: string): number;
  * @param value
  */
 export function removeFromRootViewCssClasses(value: string): string;
-
-/**
- * Resets CSS classes for root view.
- */
-export function resetRootViewCssClasses(): string[];
diff --git a/nativescript-core/css/system-classes.ts b/nativescript-core/css/system-classes.ts
@@ -30,8 +30,3 @@ export function removeFromRootViewCssClasses(value: string): string {
 
     return removedElement;
 }
-
-export function resetRootViewCssClasses(): string[] {
-    // Preserve the default `ns-root` CSS class
-    return rootViewCssClasses.splice(1);
-}

Original file line number	Diff line number	Diff line change
`@@ -30,8 +30,3 @@ export function removeFromRootViewCssClasses(value: string): string {`
`30`	`30`
`31`	`31`	`return removedElement;`
`32`	`32`	`}`
`33`		`-`
`34`		`-export function resetRootViewCssClasses(): string[] {`
`35`		- // Preserve the default `ns-root` CSS class
`36`		`- return rootViewCssClasses.splice(1);`
`37`		`-}`