NativeScript / NativeScript/angular

Issue with APP_INITIALIZER and NativeScript Theme: Core V2

Open
#66 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
55
Forks
13
Avg merge
16m
Merged PRs (30d)
1

Description

Environment

  • Node.js: v16
  • Android SDK: 30
  • JDK 11
  • Xcode: 13.3.1
  • CocoaPods 1.11.2
  • CLI: latest nativescript@8.2.2
  • Cross-platform modules: @nativescript/core@8.1.5
  • Android Runtime: @nativescript/android@8.1.1
  • iOS Runtime: @nativescript/ios@6.5.5 (JSC!)
  • Angular: @angular/core@13.2.5
  • Plugin(s):
    ├── @nativescript/theme@3.0.2

Describe the bug
The Theme.setMode() from the NativeScript Theme plugin stops working when an async APP_INITIALIZER is used.

To Reproduce
Steps to reproduce:

  • Clone the sample project
  • run npm run android or npm run ios (the home component will show some theme/system appearance details)
  • tap "Change app theme" and choose the opposite theme to your current device setting, the theme changes correctly for now, but
    Problem 1: as you can see Application.systemAppearance() now shows a wrong value (e.g. "dark", even if the device is in light mode)
  • Close the app (not only put it to background)
  • Restart the app ...
    Problem 2: The app theme is back to auto, although it is set to a specific mode in the AppComponent

But if you disable the APP_INITIALIZER by removing the APP_INITIALIZER from the providers array in app.module.ts everything is working just fine.

Expected behavior
Theme.setMode() is working despite the use of APP_INITIALIZER.

Sample project
https://github.com/jessorlisa/demo-issues-nativescript-ng/tree/issue/set-theme

Additional context
My first suspicion was that something was amiss with the theme but then I could narrow it down to the APP_INITIALIZER.

Any thoughts? Help?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked sample project with npm run android or npm run ios, then compare behavior with and without the APP_INITIALIZER provider in app.module.ts. Inspect the theme configuration referenced in AppComponent and verify that Theme.setMode() preserves the selected mode and correct Application.systemAppearance() value after restarting the app.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.