Global classes don't work on iOS 12 #279

Activity

1. NathanaelA commented on Oct 16, 2020

   

   NathanaelA

   on Oct 16, 2020 · Hidden as abuse

   show commentMore actions
2. james-criscuolo commented on Oct 16, 2020

   

   james-criscuolo

   on Oct 16, 2020

   Last edited by james-criscuolo

   Author

   More actions

   Yes, my app.scss file has every style classed within the global classes, like

   // css specificity for whole app overrides
   .ns-root {
   &.ns-ios, &.ns-android {
   &.ns-light, &.ns-dark {
   &.ns-phone, &.ns-tablet {
   &.ns-landscape, &.ns-portrait {
   

   While the above set is unnecessary, I use a block like that, with just ns-android removed for ios, and vice-versa for android.

   When I initially switched from theme V1 to theme V2, we got reports of theses styles not showing on iOS 12. Upon investigation, I found that the global classes were not there, but Theme.toggleMode(false); would add them (and be a no-op on Android, as we aren't paying attention to dark vs. light (yet)). I am using the latest core (7.0.11) and only theme version that builds with nativescript 7 (3.0.0). I tried reverting back to my previous working theme version (2.3.3) for testing, but could not with nativescript 7.
3. NathanaelA commented on Oct 18, 2020

   

   NathanaelA

   on Oct 18, 2020 · Hidden as abuse

   show commentMore actions
4. james-criscuolo commented on Oct 19, 2020

   

   james-criscuolo

   on Oct 19, 2020

   Author

   More actions

   I was able to recreate from a commandline test project

    ~  ns -v
   7.0.10
   
    ~  ns create                                                                                                                                                                                                               
   
   # Let’s create a NativeScript app!
   
   Answer the following questions to help us build the right app for you. (Note: you
   can skip this prompt next time using the --template option, or the --ng, --react, --vue, --ts, or --js flags.)
   
   ? First, what will be the name of your app? testtheme
   
   ? Next, which style of NativeScript project would you like to use: Angular
   
   ? Finally, which template would you like to start from: SideDrawer
   
   

   From here:

   • update @nativescript/theme to 3.0.0
   • ns clean
   • open _app-common.scss and wrap everything except imports with the block i have above:

   // imports
   .ns-root {
   &.ns-ios, &.ns-android {
   &.ns-light, &.ns-dark {
   &.ns-phone, &.ns-tablet {
   &.ns-landscape, &.ns-portrait {
   // contents
   }}}}}
   

   • ns run ios

   I then have two simulators, one is an ipad running ios 14, this one, the styles look as expected. I then have an iphone 6 running ios 12 (12.4, i believe it's latest), on this one, the icons are missing and the styles don't look as expected.
5. james-criscuolo commented on Nov 2, 2020

   

   james-criscuolo

   on Nov 2, 2020

   Author

   More actions

   Turns out I could update my hack and get this to work again

   -Theme.toggleMode(false);
   +Application.on(Application.displayedEvent, () => {
   +  Theme.toggleMode(false);
   +});
   

   The only class missing is ns-light (or nd-dark), so that will fix it.