-
-
Notifications
You must be signed in to change notification settings - Fork 45
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot read property 'mainScreen' of undefined - when trying to get dark mode status #275
Comments
Same for me. Tried both a Angular Template and a few minutes ago a Core template. Both same error message. |
This issue is still hunting me even after updating to 2.3.3 (which seems to fix it for some people) and the dark theme is really making my app unusable. Any progress on this? |
So after looking a litthe further if found out that there is actually a new version of the Theme packages that support {N}7. I used the RC version ( An up-to-date listing of NativeScript plugins with 7.0 compatibility that we know of After upgrading to this version the issue is gone and i can now use the light theme. Currently i can only implement a toggle button that works. Can not get the app to start in Light mode. Somehow the app loads in Dark Mode as this is currently my settings on the phone. If i can get the app to also START in light mode i'm completely happy :) |
@martijnvanschie updating to RC also does the trick for me. You can try adding this to your info.plist: This would force the light mode by default as mentioned here: https://docs.nativescript.org/ui/dark-mode |
After working on it a bit more, I've noticed that The This is most likely an old issue that is mentioned here: #232 where the solution was to use |
Here is my workaround for the above problem. Note, this is not a solution and this still needs to be fixed but since I was struggling with this a lot it might be useful for someone else also:
P.S. I'm using nativescript-vue and Vuex but the idea is clear - you go for IMPORTANT: you need to run it in |
Thanx for the updates @butaminas. I've been playing around some more with this code and found still strange behaviour. When changing the theme on my phone the {N} Theme stays the same. This is is my debugging code Application.on(Application.systemAppearanceChangedEvent, (args: SystemAppearanceChangedEventData) => {
console.log('systemAppearanceChangedEvent', args.newValue);
console.log('Theme.getMode', Theme.getMode());
}); The output is al follows (When switching from Dark to Light and back) JS: systemAppearanceChangedEvent light
JS: Theme.getMode ns-light
JS: systemAppearanceChangedEvent dark
JS: Theme.getMode ns-light Also, setting mode to light in my main.ts requires a timeout to be set. Below code does not set the {N} Theme Theme.setMode(Theme.Light); It required a (very short) timeout to make it work setTimeout(() => {
console.log('Setting mode to light');
Theme.setMode(Theme.Light);
},100); So i kinda have it working now, but I keep on investigating :) PS: I'm using {N}7 Angular |
@martijnvanschie it's definitely a bug that seems to be around for quite a while. From what I came to realize is that at this point, you can't use Currently, the only solution that is working is And yes, it also doesn't work for me without a delay. Setting everything to run at If you find anything else worth mentioning - let me and the community know as I think this is uncharted waters for most of us. Hopefully these "hacks" will stay stable and do the trick until the core is fixed. |
I'll take a look at that displayEvent again and test it out. I do have another issue which is must more annoying than the hacks. When i go from light back to dark mode on my phone (Galaxy S20+) the app stays in dark mode. Even my test button to Think i'll raise a seperate issue for this but the issues keep stacking and it does not seem to be picked up. I understand it's busy and probably due to the {N}7 upgrade as well. |
That's strange. I've tried switching dark / light mode on Xiaomi Redmi Note 8 and the appearance in the app is changing accordingly. Will try to test this out on raw Android to see if I get different results. |
Environment
Provide version numbers for the following components (information can be retrieved by running
tns info
in your project folder or by inspecting thepackage.json
of the project):"@nativescript/core": "~7.0.0",
"@nativescript/firebase": "rc",
"@nativescript/theme": "nativescript-vue" (tried with rc also),
"nativescript-vue": "~2.8.0"
Describe the bug
Pretty much stock nativescript-vue installation with NativeScript CLI 7.0.8.
In my main screen I import the theme using
import Theme from "@nativescript/theme";
Then I'm trying to get the dark mode status like this:
I get an error:
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught TypeError: Cannot read property 'mainScreen' of undefined
To Reproduce
Just try to use
Theme.getMode()
on NativeScript 7 with Vue (might be the same with others as well)Expected behavior
Haven't used this feature before, I guess it will give you a string of "ns-light" or "ns-dark" and won't break your app.
Sample project
Can't reproduce this on play.nativescript.org as it uses the old NativeScript. As far as I've tested it seems to be the issue only with NativeScript 7
The text was updated successfully, but these errors were encountered: