Not Working Effectively with Navigation about nativescript-platform-css HOT 16 OPEN

Are you using Angular or Vue, or Standard NS?

from nativescript-platform-css.

from nativescript-platform-css.

CSS is getting applied for the first time, if I navigate through my application or come back to login page by signing out. For the next login, the CSS is not getting applied to that. It is applying only for the first time when I build the application.

from nativescript-platform-css.

Is this while just running the app; or when you are using LiveSync/HMR to update the app?

from nativescript-platform-css.

from nativescript-platform-css.

LiveSync/HMR will typically overright the values frequently; that is not expected to work. But if you started the app and are just navigating in the app (w/o ever using HMR/LiveSync) and it is failing then that is a problem.

from nativescript-platform-css.

from nativescript-platform-css.

Well, LiveSync/HMR is specially because it hijacks things to replace things while the app is running so you can see any of your development changes live --- however this can also reset the CSS rules when it resets the page(s). LiveSync/HMR is specially for development of app; not what a normal user would see/use.

So if you start the app normally on a device and then do your navigation in app, and navigate back to the main screen and it fails; then that is an issue in the plugin. But if you are using HMR/LiveSync to update the development; then that is a side effect of using HMR/NativeScript... Does that make sense?

from nativescript-platform-css.

from nativescript-platform-css.

Well then that is a problem with the plugin. Any chance you can create a sample app that shows it failing. Having a real app that fails is 99% of solving the issue. 😀

from nativescript-platform-css.

from nativescript-platform-css.

SampleNS.zip

Please find the attachment of a sample project with the plugin added.

I tried to add platform specific CSS for a class where it is getting applied only for the first time and when you go back and come there again, It is not getting applied.

You can install this and check it once. There is a problem with the plugin itself.

Above attachment is a NativeScript Angular project.

from nativescript-platform-css.

Did you able to run that sample project. Did you face the same issue?

from nativescript-platform-css.

Sorry I haven't had time yet; too many other paid projects that I've been working on. It is in my list; but paid work always comes first... 😀

from nativescript-platform-css.

I found out the exact problem.
It is with the navigate method. Using any type of navigation is causing this issue.
For example: I have used this.router.navigate and also this._routerExt.navigate.

If I go with this.routerext.back() will work but in my case, I need to navigate back to first component from nested children.

from nativescript-platform-css.

I can confirm this is an issue as well. Any element targeted with the library's classes will have the styling applied at first, but as soon as you navigate to another view and back the styling's gone.

For the moment I'm styling elements programatically from the component:

import { Component, OnInit } from '@angular/core'

import {screen, isAndroid} from "tns-core-modules/platform/platform"
import { Page } from 'tns-core-modules/ui/page/page'

@Component({
        moduleId: module.id,
	selector: 'sign-in',
	templateUrl: './sign-in.component.html',
	styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {

	constructor(
            private page: Page
        ) { }

	ngOnInit() {
            this.adaptLayout()
        }

        // Check the screen's width and hide the element on small screens
        private adaptLayout() {
            if (isAndroid) {
                if (screen.mainScreen.widthDIPs <= 360) {
                    this.page.addCss(".city { visibility: collapse; }")
                }
            }   else {
                if (screen.mainScreen.widthDIPs <= 320) {
                    this.page.addCss(".city { visibility: collapse; }")
                }
           }
        }
}

from nativescript-platform-css.