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

[a-eid]

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.

Jan-02-2022.13-37-48-android-issue.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

[a-eid]

PlatformColor seems to be working with wix/react-native-navigations some how but not with react native.

pc-template.mp4

[a-eid]

PlatformColor seems to be working with wix/react-native-navigations some how but not with react native.

pc-template.mp4

Keep in mind that in the vid above I use only text from react native. All colors change correctly but not for the text. It requires an app reload

[a-eid]

issue still exists, would love to contribute a fix with minimal assistance.

[pablorodrigo]

Hello. You just need to do a few things for those who use the Expo to make it works automatically.

1. Added in your app.json configuration
   { "expo": { "userInterfaceStyle": "automatic" } }

2. added expo-system-ui dependence

After that, I could use any code as

1. const scheme = useColorScheme();
2. const colorScheme = Appearance.getColorScheme();

that worked normally.

Sources

1. https://docs.expo.dev/guides/color-schemes/
2. https://docs.expo.dev/versions/latest/sdk/system-ui/

[a-eid]

Hello. You just need to do a few things for those who use the Expo to make it works automatically.

1. Added in your app.json configuration

`

{

"expo": {

"userInterfaceStyle": "automatic"

}

}

`

2. added expo-system-ui dependence

After that, I could use any code as

1. const scheme = useColorScheme();

2. const colorScheme = Appearance.getColorScheme();

that worked normally.

Sources

1. https://docs.expo.dev/guides/color-schemes/

2. https://docs.expo.dev/versions/latest/sdk/system-ui/

I'm not talking about colorScheme.

a platformColor is colorScheme aware, if I have a platformColor named primary which is equal to red in dark mode and blue in light mode.

it should switch automatically when the device color scheme changes.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[retyui]

Any updates?

[burakgormek]

Im also facing this issue but not found any solution yet.

Appearance.setColorScheme can set theme for PlatformColor but only before using it. No changes after using it on view&text etc.

[sidorchukandrew]

You'll need to restart the activity on Android for the new colors to take effect.

[nikhiltekwani09]

Do we have any update on this?
Is it possible to reflect colors without re rendering the component?