react / react/react-native

[android] PlatformColor does not respond to dark | light mode changes on android ?

オープン
#32,823 コメント 22 件 リアクション 14 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Needs: Triage :mag: Platform: Android
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

Description

PlatformColor on android does not pickup the correct color on theme changes as it does on IOS.

it's worth mentioning that useColorScheme does pick up the device theme correctly.

https://user-images.githubusercontent.com/19273413/147874550-5c5650e5-4c5e-465a-b15a-897726f93a78.mp4

Version

66.4

Output of npx react-native info
System:
    OS: macOS 11.6.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
    Memory: 295.98 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /usr/local/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.1.2 - ~/n/bin/npm
    Watchman: 2021.12.20.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 28, 29, 30, 31
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 31.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Arctic Fox 2020.3.1 Patch 3 Arctic Fox 2020.3.1 Patch 3
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.4 => 0.66.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
Steps to reproduce

after creating a react native project.

[1] create a values-night/colors.xml and values/colors.xml inside android/app/src/main/res

[2] add both dark mode and light mode colors to both colors.xml files accordingly.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="text">#000000</color>
  <color name="background">#FFFFFF</color>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="text">#FFFFFF</color>
  <color name="background">#000000</color>
</resources>

[3] rebuild the app.

[4] change your device theme from settings

observation:
colors don't react to the device theme.

[5] try changing your device theme then reloading from dev menu.

observation:
colors change & respect the device theme after reload.

[6] removing uiMode from android:configChanges inside inside AndroidManifest.xml does resolve the issue however it's performant ( the application would then be torn down and recreated with the theme change ).

Snack, code example, screenshot, or link to a repository

https://github.com/a-eid/platformColorAndroidIssue

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、issue に記載されている values/colors.xml および values-night/colors.xml リソースを使用して、リンクされた platformColorAndroidIssue の例で挙動を再現します。デバイスのテーマを変更しながら PlatformColor と useColorScheme を比較し、AndroidManifest.xml、特に android:configChanges と uiMode を確認します。リロードやアプリケーションのアンマウントを必要とせず、テーマの変更時に PlatformColor が更新されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
android, react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
静か
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。