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

[sannajammeh]

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.

1. run npx react-native init TestDark --template react-native-template-typescript
2. Import Appearance & useColorScheme from 'react-native'
3. copy paste the code snippet below above the return in <App /> or use the useColorScheme hook and console.log its output.
4. 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

[elkinjosetm]

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]

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

[rarira]

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]

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]

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]

@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]

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]

@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]

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 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]

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