Fix React Native Appearance/useColorScheme support for SDK 38 #8793

brentvatne · 2020-06-13T03:51:48Z

Why

useColorScheme has two problems right now:

It doesn't update on Android, but it does on iOS. Related issue: Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. facebook/react-native#28823 - it requires we override onConfigurationChanged in our activity.
It doesn't respect the configuration when users force a particular color scheme via userInterfaceStyle in app.json.

How

Added the onConfigurationChanged method as required, verified that this fixes useColorScheme from react-native
Copy over relevant code from ExpoAppearanceModule to give priority to the current activity local night mode configuration (which is what we use to enforce a specific scheme when userInterfaceStyle is set in app.json). This required bumping appcompat to 1.1.0 in ReactAndroid.

TODO

The changes to BaseExperienceActivity will apply to SDK38 just fine, but the ReactAndroid changes will not. These need to be applied to SDK38 too, and I'm not familiar with the process for this on Android.

Test Plan

Use the tabs template
If TODO hasn't been resolved, set the sdkVersion to UNVERSIONED
Set userInterfaceStyle to light in app.json and verify that it's light when you use dark mode, and nothing happens when you toggle between modes while it's open. Same for dark. Verify automatic works as expected.

… React Native useColorScheme

…Native AppearanceModule - Fixes userInterfaceStyle app.json setting when used in combination with useColorScheme from React native

… like elsewhere in activity

ide

Requesting changes to have a separate PR to expo/react-native on a branch prefixed with expo/ so that we don't lose this commit in the future.

Talking to @esamelson if we want this in the release we need this to be in a shippable state soon (Tuesday or Wednesday) since we've already versioned the Android code (will need to re-version) and are otherwise ready to continue the release process.

ide · 2020-06-15T22:47:40Z

android/expoview/src/main/java/host/exp/exponent/experience/BaseExperienceActivity.java

+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+
+    if (mReactInstanceManager != null && mReactInstanceManager.isNotNull() && !mIsCrashed) {
+      mReactInstanceManager.call("onConfigurationChanged", this, newConfig);
+    }
+  }
+


Reviewed this part; looks fine to me.

* [android] Add onConfigurationChanged to BaseExperienceActivity to fix React Native useColorScheme * [ReactAndroid] Use getLocalNightMode from AppCompatDelegate in React Native AppearanceModule - Fixes userInterfaceStyle app.json setting when used in combination with useColorScheme from React native * [android] Validate mReactInstanceManager before calling method on it, like elsewhere in activity

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

brentvatne · 2020-06-17T00:50:53Z

Added to the react-native fork in expo/react-native@48e27f6 and pushed to this branch https://github.com/expo/react-native/tree/expo/respect-local-night-mode

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793 This is a squashed commits with the following changes: commit 945096e Author: Kudo Chien <[email protected]> Date: Tue Jul 27 16:49:09 2021 +0800 [android] Upgrade androidx.appcompat to 1.2.0 Backport from: expo/expo@58fa52e

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793 This is a squashed commits with the following changes: commit 945096e54ff9f5d9f5639cea201f101efac472a9 Author: Kudo Chien <[email protected]> Date: Tue Jul 27 16:49:09 2021 +0800 [android] Upgrade androidx.appcompat to 1.2.0 Backport from: expo/expo@58fa52e

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793 This is a squashed commits with the following changes: commit 945096e Author: Kudo Chien <[email protected]> Date: Tue Jul 27 16:49:09 2021 +0800 [android] Upgrade androidx.appcompat to 1.2.0 Backport from: expo/expo@58fa52e

…ivity to play nicely with Expo client color scheme locking mechanism. expo/expo#8793" This reverts commit 4f7f58e.

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793 This is a squashed commits with the following changes: commit 945096e Author: Kudo Chien <[email protected]> Date: Tue Jul 27 16:49:09 2021 +0800 [android] Upgrade androidx.appcompat to 1.2.0 Backport from: expo/expo@58fa52e

brentvatne added 3 commits June 12, 2020 21:03

[android] Add onConfigurationChanged to BaseExperienceActivity to fix…

c158024

… React Native useColorScheme

[ReactAndroid] Use getLocalNightMode from AppCompatDelegate in React …

a005465

…Native AppearanceModule - Fixes userInterfaceStyle app.json setting when used in combination with useColorScheme from React native

[android] Validate mReactInstanceManager before calling method on it,…

b2beca7

… like elsewhere in activity

brentvatne force-pushed the @brent/fix-android-dark-mode branch from e70013b to b2beca7 Compare June 13, 2020 04:03

brentvatne added the Launch-blocking label Jun 13, 2020

ide requested changes Jun 15, 2020

View reviewed changes

ide reviewed Jun 15, 2020

View reviewed changes

esamelson approved these changes Jun 17, 2020

View reviewed changes

brentvatne merged commit df43b15 into master Jun 17, 2020

brentvatne deleted the @brent/fix-android-dark-mode branch June 17, 2020 00:45

brentvatne added a commit to expo/react-native that referenced this pull request Jun 17, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

48e27f6

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

EvanBacon pushed a commit to expo/react-native that referenced this pull request Jun 27, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

49a37ca

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

EvanBacon pushed a commit to expo/react-native that referenced this pull request Jul 9, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

1ca7246

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

EvanBacon pushed a commit to expo/react-native that referenced this pull request Jul 11, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

be63957

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

EvanBacon pushed a commit to expo/react-native that referenced this pull request Jul 11, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

6e8ff5b

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

EvanBacon pushed a commit to expo/react-native that referenced this pull request Jul 23, 2020

[ReactAndroid] Respect local night mode configuration for activity to…

894a52e

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

Kudo pushed a commit to expo/react-native that referenced this pull request Jul 19, 2021

[ReactAndroid] Respect local night mode configuration for activity to…

e4e386d

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

douglowder pushed a commit to react-native-tvos/react-native-tvos that referenced this pull request Jan 9, 2022

[ReactAndroid] Respect local night mode configuration for activity to…

a660044

… play nicely with Expo client color scheme locking mechanism. expo/expo#8793

chrfalch added a commit to expo/react-native that referenced this pull request Oct 15, 2025

Revert "[ReactAndroid] Respect local night mode configuration for act…

43624c8

…ivity to play nicely with Expo client color scheme locking mechanism. expo/expo#8793" This reverts commit 4f7f58e.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix React Native Appearance/useColorScheme support for SDK 38 #8793

Fix React Native Appearance/useColorScheme support for SDK 38 #8793

Uh oh!

brentvatne commented Jun 13, 2020 •

edited

Loading

Uh oh!

ide left a comment

Uh oh!

ide Jun 15, 2020

Uh oh!

brentvatne commented Jun 17, 2020 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix React Native Appearance/useColorScheme support for SDK 38 #8793

Fix React Native Appearance/useColorScheme support for SDK 38 #8793

Uh oh!

Conversation

brentvatne commented Jun 13, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

How

TODO

Test Plan

Uh oh!

ide left a comment

Choose a reason for hiding this comment

Uh oh!

ide Jun 15, 2020

Choose a reason for hiding this comment

Uh oh!

brentvatne commented Jun 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

brentvatne commented Jun 13, 2020 •

edited

Loading

brentvatne commented Jun 17, 2020 •

edited

Loading