[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?