Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. #28823

sannajammeh · 2020-05-04T15:03:19Z

Description

The subscription of useColorScheme() and Appearance.addChangeListener() wont work. The hook returns an initial value only on component mount. Changes to the devices color scheme on Android does not provide the hook with a new value. I therefore tried to manually replicate this hook with useEffect and the Appearance module and found that Appearance.addChangeListener() when called returns "undefined", not type EventSubscription. The listener function provided to Appearance.addChangeListener() never gets called.

I have only tested this on Android so I am not aware if this is also an issue on iOS.

React Native version:

System:
    OS: Windows 10 10.0.17763
    CPU: (16) x64 Intel(R) Core(TM) i7-5960X CPU @ 3.00GHz
    Memory: 15.05 GB / 31.92 GB
  Binaries:
    Node: 10.16.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-28 | Intel x86 Atom_64, android-R | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6308749
  Languages:
    Java: 1.8.0_211 - C:\Program Files\Java\jdk1.8.0_211\bin\javac.EXE
    Python: 2.7.18 - C:\Python27\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

run npx react-native init TestDark --template react-native-template-typescript
Import Appearance & useColorScheme from 'react-native'
copy paste the code snippet below above the return in <App /> or use the useColorScheme hook and console.log its output.
Change the color scheme of the Android device and check the console for the correct values.

Expected Results

The useColorScheme hook should return the correct colorScheme when the devices colorScheme changes.
The Appearance.addChangeListener() should return type EventSubscription not undefined.
The listener callback provided to Appearance.addChangeListener(cb) should be called.

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

const App = () => {
  const colorScheme = useColorScheme(); // Only gives initial colorScheme, does not return new colorScheme on change.
  const [mode1, setMode1] = useState('light');
  const mode = colorScheme || 'light';

  React.useEffect(() => {
    const initialColorScheme = Appearance.getColorScheme(); // Works as expected
    setMode1(initialColorScheme || 'light');

    const listener = () => {
      console.log('called'); // Never fires
      const colorScheme1 = Appearance.getColorScheme();
      setMode1(colorScheme1 || 'light');
    };

    const subscription = Appearance.addChangeListener(listener);
    console.log('App -> subscription', subscription); // logs as undefined
    return () => {
      Appearance.removeChangeListener(listener);
    };
  }, []);
  return (
   // jsx
  )
}

Here is a GIF of the app created with npx react-native init NAME --template react-native-template-typescript command. Look for Mode: dark (useColorScheme() and Mode_1 (useEffect & Appearance module). https://gyazo.com/d4ddb35bf689b3c8926be2f613714f73

The text was updated successfully, but these errors were encountered:

elkinjosetm · 2020-05-12T14:56:36Z

Having the same issue here, but it works fine on iOS. For some reason the changeListener never gets called on Android when changing the system color scheme

josmithua · 2020-05-12T15:15:02Z

Having issues with useColorScheme as well, same as described by the OP on Android. On iOS it always returns dark

rarira · 2020-05-26T15:47:37Z

In my case, On iOS it always returns light.. and useColorScheme subscription doesn't work and Appearance.addChangeListener doesn't call its callback on both ios and android

franciscocobas · 2020-06-03T20:19:05Z

Having the same issue here, but it works fine on iOS. For some reason the changeListener never gets called on Android when changing the system color scheme

Same issue here, works well on iOS but not in Android, changeListener is never called.

franciscocobas · 2020-06-04T13:04:43Z

Oh finally I solved the issue for Android.

Based on the documentation of the react-native-appearance package I found a configuration for Android that solve this issue.

It has to modify the MainActivity.java with the following code

import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import

public class MainActivity extends ReactActivity {
  ......

  // copy these lines
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }

  ......
}

josmithua · 2020-06-05T20:30:41Z

@franciscocobas that didn't work for me :/. I create a brand new project and added that method, but it still didn't work.

Also @rarira make sure that for iOS, you don't have UIUserInterfaceStyle set in your Info.plist file. That was my mistake (I had it set to Dark, hence why useColorScheme was always returning dark).

sannajammeh · 2020-06-06T13:19:31Z

Oh finally I solved the issue for Android.

Based on the documentation of the react-native-appearance package I found a configuration for Android that solve this issue.

It has to modify the MainActivity.java with the following code

import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import

public class MainActivity extends ReactActivity {
  ......

  // copy these lines
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }

  ......
}

This does seem to fix the issue, make sure uiMode is added in android:configChanges in AndroidManifest.xml also. Thank you for the quick solution :)

Edit: This only works when using react-native-appearance. The issue of react-native's Appearance API is still there.

rarira · 2020-06-06T16:45:51Z

@franciscocobas that didn't work for me :/. I create a brand new project and added that method, but it still didn't work.

Also @rarira make sure that for iOS, you don't have UIUserInterfaceStyle set in your Info.plist file. That was my mistake (I had it set to Dark, hence why useColorScheme was always returning dark).

Thank you @josmithua ... I also have UIUserInterfaceStyle in my info.plist :)

franciscocobas · 2020-06-08T14:27:10Z

Oh finally I solved the issue for Android.
Based on the documentation of the react-native-appearance package I found a configuration for Android that solve this issue.
It has to modify the MainActivity.java with the following code
import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import

public class MainActivity extends ReactActivity {
  ......

  // copy these lines
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }

  ......
}
This does seem to fix the issue, make sure uiMode is added in android:configChanges in AndroidManifest.xml also. Thank you for the quick solution :)

Edit: This only works when using react-native-appearance. The issue of react-native's Appearance API is still there.

Not really, I'm using the react-native's Appearance API.
I have a working implementation of that, check this repository https://github.com/franciscocobas/ReactNativeDarkMode

mvrdrew · 2020-06-08T14:38:59Z

I was having the same problem with the hook only returning 'light', no matter how much I'd toggle the appearance in the simulator.

After a lot of digging into code, it turned out the reason it was doing this was due to - the debugger! If you're using a Chrome-based debugger (either in browser or using the standalone RN debugger) the Appearance module will always return light, due to the debugger not being able to handle async functions (or something like that, it was a few days ago!).

I can't say I understand the idiosyncracies as to why it does this, but the upshot of it all is I stopped using the Chrome debugger and moved to flipper - and it worked! I'm now able to swap between dark and light mode using the useColorTheme hook as expected.

Hope this helps someone else, it was a head scratcher for me for quite a while!

rarira · 2020-06-08T15:33:44Z

Oh finally I solved the issue for Android.
Based on the documentation of the react-native-appearance package I found a configuration for Android that solve this issue.
It has to modify the MainActivity.java with the following code
import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import

public class MainActivity extends ReactActivity {
  ......

  // copy these lines
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    Intent intent = new Intent("onConfigurationChanged");
    intent.putExtra("newConfig", newConfig);
    sendBroadcast(intent);
  }

  ......
}
This does seem to fix the issue, make sure uiMode is added in android:configChanges in AndroidManifest.xml also. Thank you for the quick solution :)
Edit: This only works when using react-native-appearance. The issue of react-native's Appearance API is still there.
Not really, I'm using the react-native's Appearance API.
I have a working implementation of that, check this repository https://github.com/franciscocobas/ReactNativeDarkMode

@mvrdrew I use flipper not chrome debugger, but it doesn't work either.

@franciscocobas I tried your repo and it works as you mentioned... and you only used react native's API in your code, But I found that in your package.json you have 'react-native-appear' in your dependancies which I don't have.
So I also tried it, I mean just 'yarn add react-native-appearance' .... and it works!!
Of course, I need those lines in MainActivity.java

josmithua · 2020-06-08T16:42:44Z

While that might be a work around, this issue is to do with React Native's own Appearance module not working correctly.

mrbrentkelly · 2020-06-10T12:23:22Z

To add on to the list of issues. For iOS I've noticed some strange behavior when overriding the Window UserInterfaceStyle natively.

From the above gif you can see that setting the system theme works perfect, both the useColorScheme hook and change listener trigger.

But if you call window.overrideUserInterfaceStyle = .dark from native iOS only the change listener reacts and updates.

Then when you call window.overrideUserInterfaceStyle = .light neither the hook or change listener get called.

^^ this is using the Appearance API from React Native core.

If I use the react-native-appearance library this behavior works fine...

mrbrentkelly · 2020-06-10T13:17:04Z

Also noticed an issue on the Android side (using react-native-appearance). If you try and override the system theme natively by calling AppCompatDelegate.setDefaultNightMode the useColorScheme hook or update listener aren't called.

e.g. Calling AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); from native android should trigger an update by the Appearance API on the JavaScript side.

I've raised a PR to address this in react-native-appearance but thought I should mention it here so that the same fix can be brought into React Native core if needed.

expo/react-native-appearance#50

mrbrentkelly · 2020-06-10T14:04:13Z

In terms of getting Android to react to the system theme using the React Native core API, I've got it working by doing the following...

// in MainActivity.java
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}

It appears this is some missed implementation in ReactActivity.java and ReactActivityDelegate.java.

josmithua · 2020-06-10T14:15:17Z

Thanks @mrbrentkelly, I can confirm your Android fix works.

hearingguo · 2020-06-17T15:27:35Z

In my case, On iOS it always returns light.. and useColorScheme subscription doesn't work and Appearance.addChangeListener doesn't call its callback on both ios and android

i have same issue, have you solved the problem?

dubiao · 2020-06-20T16:33:54Z

Having issues with useColorScheme as well, same as described by the OP on Android. On iOS it always returns dark

On my iOS it always returnslight

Untill facebook/react-native#28823 will be fixed

Until facebook/react-native#28823 will be fixed

alexandrughinea · 2020-07-30T21:57:20Z

It doesn't subscribe to changes still.
I only get the initial value - and that is not always reported correctly.

ndbeyer · 2020-08-04T08:01:32Z

For me this works on an ios device with debug mode off. For all other cases (ios device debug mode on, ios simulator, android simulator, android device) this does not seem to work.

efeliz · 2020-08-13T22:48:14Z

Thanks, @mrbrentkelly! I've confirmed that this manual fix works for me while using the official Appearance API. 🥳

mrbrentkelly · 2020-08-14T07:52:58Z

Feel free to submit a PR

I already did a few weeks back :) #29106

ShivamJoker · 2020-08-14T08:14:10Z

MainActivity.java

import com.facebook.react.ReactActivity;
import android.content.Intent; 
import android.content.res.Configuration;
public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "SQL_PlayGround";
  }

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    getReactInstanceManager().onConfigurationChanged(this, newConfig);
  }
}

The whole code to fix this, hope this gets fixed ASAP

irekrog · 2020-09-22T06:47:27Z

@mrbrentkelly

In terms of getting Android to react to the system theme using the React Native core API, I've got it working by doing the following...
// in MainActivity.java
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}
It appears this is some missed implementation in ReactActivity.java and ReactActivityDelegate.java.

Doesn't work for me... I'm using react-native-cli not expo and I have still 'dark' from useColorScheme (from react-native and also from react-native-appearance). Where should be call AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_NO)? In MainActivity or MainApplication? And before or after onCreate method?

mrbrentkelly · 2020-09-22T09:09:00Z

@irekrog I've just created a repo that applies the workaround if you want to take a look https://github.com/mrbrentkelly/rn-appearance-workaround.

The only code change required to get useColorScheme to work correctly in fresh RN project is in MainActivity.java

package com.someproject;

import com.facebook.react.ReactActivity;
import android.content.res.Configuration; // <-- Add this import

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "SomeProject";
  }

  // Add this code to get Appearance API to work in Android

  @Override
  public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    getReactInstanceManager().onConfigurationChanged(this, newConfig);
  }
}

Also make sure you're using an android device or emulator that's running Android 10 or above.

Where should be call AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_NO)? In MainActivity or MainApplication? And before or after onCreate method?

This is more of a RN brownfield scenario so you probably don't need to call this at all.

irekrog · 2020-09-22T09:33:22Z

@mrbrentkelly

Ohh thank you for example repo! :)

But now I guess what is wrong because I have a slightly different case. In my app in Settings I have a switcher and I can set dark or light theme for app. For example on my device system theme is dark, but for app I want to change theme to light. Value of theme (dark/light) is saved in SharedPreferences with react-native-shared-preferences library. After restart app in onCreate method in Java I get value from SharedPreferences and if value is light then I call AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_NO) but unfortunately useColorScheme still returns 'dark'... :/

Also I have checked with int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK; what is value after call AppCompatDelegate.setDefaultNightMode(MODE_NIGHT_NO) and value of currentNightMode is properly because returns Configuration.UI_MODE_NIGHT_NO

Additionaly I need to manipulate theme in Java with setDefaultNightMode because this is needed to change color in Splash Screen (also I created bug in react-native-bootsplash also related with setDefaultNightMode zoontek/react-native-bootsplash#157)

mrbrentkelly · 2020-09-22T10:19:47Z

@irekrog there's a bug in the appearance API in RN core which will prevent calls to AppCompatDelegate.setDefaultNightMode() from being respected. I have fixed this bug (and the others mentioned in this issue) here but it hasn't been merged yet.

I also fixed the same bug in the react-native-appearance package. That PR was merged already expo/react-native-appearance#50 but I don't think its been published to NPM yet.

So you could ask them to publish the latest changes from their main branch or add react-native-appearance to your project using a github URL instead of through npm (which I wouldn't recommend).

e.g.

yarn add react-native-appearance@https://github.com/expo/react-native-appearance

Note react-native-appearance has a slightly difference setup configuration so check out their docs https://github.com/expo/react-native-appearance

I just tested this all out by creating a bridge module that calls AppCompatDelegate.setDefaultNightMode and it works for me:

https://github.com/mrbrentkelly/rn-appearance-workaround/compare/BK-WithRNA?expand=1

irekrog · 2020-09-22T11:30:55Z

@mrbrentkelly

Thank you very very much! :) Yeah, your fix is merged but still not publish to NPM so temporary I have used patch-package to patch react-native-appearance using your fix and it works fine 👍

Set initial theme to current device theme Pick this fix facebook/react-native#28823

1) bare workflow recommendations for android dont work ``` public void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); // dont work // Intent intent = new Intent("onConfigurationChanged"); // intent.putExtra("newConfig", newConfig); // sendBroadcast(intent); // works ideally and already approved by many people in issue facebook/react-native#28823 (comment) getReactInstanceManager().onConfigurationChanged(this, newConfig); } ``` 2) Turned on debugger break `useColorScheme` and `Appearance.getColorScheme` they always return 'light' facebook/react-native#28823 (comment)

dmeyer-pfg · 2021-08-23T15:09:37Z

In my case, On iOS it always returns light.. and useColorScheme subscription doesn't work and Appearance.addChangeListener doesn't call its callback on both ios and android

Assuming you aren't running into the debugger issue mentioned above, my issue was that the UIUserInterfaceStyle within the Info.plist was set to Light. Changing it to Automatic fixed my issue.

More info here.

DiegoBM · 2021-09-16T17:07:09Z

In terms of getting Android to react to the system theme using the React Native core API, I've got it working by doing the following...
// in MainActivity.java
@Override
public void onConfigurationChanged(Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  getReactInstanceManager().onConfigurationChanged(this, newConfig);
}
It appears this is some missed implementation in ReactActivity.java and ReactActivityDelegate.java.

How come more than one year later this hasn't made it into Android yet?

thanks to -- facebook/react-native#28823 (comment)

pke · 2021-10-15T10:19:27Z

I was finally merged into main 9 days ago :) When can we expect this to hit the npm packaged release?

Summary: This PR fixes a few issues with the Appearance API (as noted here #28823). 1. For the Appearance API to work correctly on Android you need to call `AppearanceModule.onConfigurationChanged` when the current Activity goes through a configuration change. This was being called in the RNTester app but not in `ReactActivity` so it meant the Appearance API wouldn't work for Android in newly generated RN projects (or ones upgraded to the latest version of RN). 2. The Appearance API wasn't working correctly for brownfield scenarios on Android. It's possible to force an app light or dark natively on Android by calling `AppCompatDelegate.setDefaultNightMode()`. The Appearance API wasn't picking up changes from this function because it was using the Application context instead of the current Activity context. 3. The Appearance API wasn't working correctly for brownfield scenarios on iOS. Just like on Android its possible to force an app light or dark natively by setting `window.overrideUserInterfaceStyle`. The Appearance API didn't work with this override because we were overwriting `_currentColorScheme` back to default as soon as we set it. ## Changelog  ### Fixed #28823 * [Android] [Fixed] - Appearance API now works on Android * [Android] [Fixed] - Appearance API now works correctly when calling `AppCompatDelegate.setDefaultNightMode()` * [iOS] [Fixed] - Appearance API now works correctly when setting `window.overrideUserInterfaceStyle` Pull Request resolved: #29106 Test Plan: Ran RNTester on iOS and Android and verified the Appearance examples still worked [correctly.](url) Reviewed By: hramos Differential Revision: D31284331 Pulled By: sota000 fbshipit-source-id: 45bbe33983e506eb177d596d33ddf15f846708fd

…acebook#29106) Summary: This PR fixes a few issues with the Appearance API (as noted here facebook#28823). 1. For the Appearance API to work correctly on Android you need to call `AppearanceModule.onConfigurationChanged` when the current Activity goes through a configuration change. This was being called in the RNTester app but not in `ReactActivity` so it meant the Appearance API wouldn't work for Android in newly generated RN projects (or ones upgraded to the latest version of RN). 2. The Appearance API wasn't working correctly for brownfield scenarios on Android. It's possible to force an app light or dark natively on Android by calling `AppCompatDelegate.setDefaultNightMode()`. The Appearance API wasn't picking up changes from this function because it was using the Application context instead of the current Activity context. 3. The Appearance API wasn't working correctly for brownfield scenarios on iOS. Just like on Android its possible to force an app light or dark natively by setting `window.overrideUserInterfaceStyle`. The Appearance API didn't work with this override because we were overwriting `_currentColorScheme` back to default as soon as we set it. ## Changelog  ### Fixed facebook#28823 * [Android] [Fixed] - Appearance API now works on Android * [Android] [Fixed] - Appearance API now works correctly when calling `AppCompatDelegate.setDefaultNightMode()` * [iOS] [Fixed] - Appearance API now works correctly when setting `window.overrideUserInterfaceStyle` Pull Request resolved: facebook#29106 Test Plan: Ran RNTester on iOS and Android and verified the Appearance examples still worked [correctly.](url) Reviewed By: hramos Differential Revision: D31284331 Pulled By: sota000 fbshipit-source-id: 45bbe33983e506eb177d596d33ddf15f846708fd

Summary: This PR fixes a few issues with the Appearance API (as noted here facebook/react-native#28823). 1. For the Appearance API to work correctly on Android you need to call `AppearanceModule.onConfigurationChanged` when the current Activity goes through a configuration change. This was being called in the RNTester app but not in `ReactActivity` so it meant the Appearance API wouldn't work for Android in newly generated RN projects (or ones upgraded to the latest version of RN). 2. The Appearance API wasn't working correctly for brownfield scenarios on Android. It's possible to force an app light or dark natively on Android by calling `AppCompatDelegate.setDefaultNightMode()`. The Appearance API wasn't picking up changes from this function because it was using the Application context instead of the current Activity context. 3. The Appearance API wasn't working correctly for brownfield scenarios on iOS. Just like on Android its possible to force an app light or dark natively by setting `window.overrideUserInterfaceStyle`. The Appearance API didn't work with this override because we were overwriting `_currentColorScheme` back to default as soon as we set it. ## Changelog  ### Fixed facebook/react-native#28823 * [Android] [Fixed] - Appearance API now works on Android * [Android] [Fixed] - Appearance API now works correctly when calling `AppCompatDelegate.setDefaultNightMode()` * [iOS] [Fixed] - Appearance API now works correctly when setting `window.overrideUserInterfaceStyle` Pull Request resolved: facebook/react-native#29106 Test Plan: Ran RNTester on iOS and Android and verified the Appearance examples still worked [correctly.](url) Reviewed By: hramos Differential Revision: D31284331 Pulled By: sota000 fbshipit-source-id: 45bbe33983e506eb177d596d33ddf15f846708fd

sannajammeh added the Needs: Triage 🔍 label May 4, 2020

sannajammeh changed the title ~~Appearance module does not behave correctly, addChangeListener does not behave correctly.~~ Appearance module does not behave correctly, addChangeListener does not behave correctly. useColorScheme() does not behave correctly. May 4, 2020

mrbrentkelly mentioned this issue Jun 10, 2020

Addressing various issues with the Appearance API (#28823) #29106

Closed

brentvatne mentioned this issue Jun 13, 2020

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

Merged

1 task

vaagnavanesyan added a commit to vaagnavanesyan/piligrim that referenced this issue Jul 13, 2020

Fix theme changing with 3rd party library

d1003ad

Untill facebook/react-native#28823 will be fixed

vaagnavanesyan added a commit to vaagnavanesyan/piligrim that referenced this issue Jul 13, 2020

Fix theme changing with 3rd party library

a3e8a53

Until facebook/react-native#28823 will be fixed

vaagnavanesyan added a commit to vaagnavanesyan/piligrim that referenced this issue Jul 13, 2020

Fix theme changing with 3rd party library

582e9e3

Until facebook/react-native#28823 will be fixed

ShivamJoker mentioned this issue Aug 14, 2020

Dynamic stylesheet is not working please fix it codemotionapps/react-native-dynamic#8

Closed

safaiyeh added the Resolution: PR Submitted A pull request with a fix has been provided. label Aug 14, 2020

safaiyeh added Platform: Android Android applications. and removed Needs: Issue Manager Attention labels Sep 2, 2020

rikkekantega mentioned this issue Oct 28, 2020

fix: QA fixes for theming/dark mode AtB-AS/mittatb-app#611

Merged

outaTiME mentioned this issue Nov 19, 2020

Apparence turns light (for an instant) to when back and forth on iOS with SDK39 expo/expo#10815

Closed

rocknegi added a commit to rocknegi/hksj that referenced this issue Feb 1, 2021

Add addChangeListener to react to change in device's system theme

f81f020

Set initial theme to current device theme Pick this fix facebook/react-native#28823

s123121 mentioned this issue Jul 26, 2021

Allow select scheme to change color scheme manually wix/react-native-ui-lib#1430

Merged

kanzitelli added a commit to starters-dev/rn-starter that referenced this issue Sep 23, 2021

[android]: make Appearance API work again!

61cf743

thanks to -- facebook/react-native#28823 (comment)

facebook-github-bot closed this as completed in 25a2c60 Oct 6, 2021

kz-takahashi mentioned this issue Nov 9, 2021

✨: テーマコンテキストのコンポーネント実装 ws-4020/mobile-app-crib-notes#543

Merged

17 tasks

facebook locked as resolved and limited conversation to collaborators Oct 6, 2022

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. #28823

Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. #28823

sannajammeh commented May 4, 2020 •

edited

elkinjosetm commented May 12, 2020 •

edited

josmithua commented May 12, 2020 •

edited

rarira commented May 26, 2020 •

edited

franciscocobas commented Jun 3, 2020

franciscocobas commented Jun 4, 2020

josmithua commented Jun 5, 2020 •

edited

sannajammeh commented Jun 6, 2020 •

edited

rarira commented Jun 6, 2020

franciscocobas commented Jun 8, 2020

mvrdrew commented Jun 8, 2020

rarira commented Jun 8, 2020 •

edited

josmithua commented Jun 8, 2020

mrbrentkelly commented Jun 10, 2020 •

edited

mrbrentkelly commented Jun 10, 2020

mrbrentkelly commented Jun 10, 2020

josmithua commented Jun 10, 2020

hearingguo commented Jun 17, 2020

dubiao commented Jun 20, 2020

alexandrughinea commented Jul 30, 2020

ndbeyer commented Aug 4, 2020

efeliz commented Aug 13, 2020

mrbrentkelly commented Aug 14, 2020

ShivamJoker commented Aug 14, 2020 •

edited

irekrog commented Sep 22, 2020 •

edited

mrbrentkelly commented Sep 22, 2020

irekrog commented Sep 22, 2020

mrbrentkelly commented Sep 22, 2020 •

edited

irekrog commented Sep 22, 2020

dmeyer-pfg commented Aug 23, 2021

DiegoBM commented Sep 16, 2021

pke commented Oct 15, 2021

Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. #28823

Appearance module does not behave correctly: addChangeListener does not react to changes, useColorScheme() does not react to changes. #28823

Comments

sannajammeh commented May 4, 2020 • edited

Description

React Native version:

Steps To Reproduce

Expected Results

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

elkinjosetm commented May 12, 2020 • edited

josmithua commented May 12, 2020 • edited

rarira commented May 26, 2020 • edited

franciscocobas commented Jun 3, 2020

franciscocobas commented Jun 4, 2020

josmithua commented Jun 5, 2020 • edited

sannajammeh commented Jun 6, 2020 • edited

rarira commented Jun 6, 2020

franciscocobas commented Jun 8, 2020

mvrdrew commented Jun 8, 2020

rarira commented Jun 8, 2020 • edited

josmithua commented Jun 8, 2020

mrbrentkelly commented Jun 10, 2020 • edited

mrbrentkelly commented Jun 10, 2020

mrbrentkelly commented Jun 10, 2020

josmithua commented Jun 10, 2020

hearingguo commented Jun 17, 2020

dubiao commented Jun 20, 2020

alexandrughinea commented Jul 30, 2020

ndbeyer commented Aug 4, 2020

efeliz commented Aug 13, 2020

mrbrentkelly commented Aug 14, 2020

ShivamJoker commented Aug 14, 2020 • edited

irekrog commented Sep 22, 2020 • edited

mrbrentkelly commented Sep 22, 2020

irekrog commented Sep 22, 2020

mrbrentkelly commented Sep 22, 2020 • edited

irekrog commented Sep 22, 2020

dmeyer-pfg commented Aug 23, 2021

DiegoBM commented Sep 16, 2021

pke commented Oct 15, 2021

sannajammeh commented May 4, 2020 •

edited

elkinjosetm commented May 12, 2020 •

edited

josmithua commented May 12, 2020 •

edited

rarira commented May 26, 2020 •

edited

josmithua commented Jun 5, 2020 •

edited

sannajammeh commented Jun 6, 2020 •

edited

rarira commented Jun 8, 2020 •

edited

mrbrentkelly commented Jun 10, 2020 •

edited

ShivamJoker commented Aug 14, 2020 •

edited

irekrog commented Sep 22, 2020 •

edited

mrbrentkelly commented Sep 22, 2020 •

edited