Appearance issue

[chukhlov]

React-native Appearance has some issue on background mode.
Here is an video example how to reproduce the bug in the app https://ru.files.fm/u/x5uzfjqtb#/view/swr72wr5p

Appearance listener will change the colorScheme value to "light" when app is in background mode and never back to dark.

useEffect(() => {
    const listener = ({colorScheme}: any) => {
      setIsDarkMode(colorScheme === 'dark');
    };
    Appearance.addChangeListener(listener);

    return () => {
      Appearance.removeChangeListener(listener);
    };
  }, []);

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[ibelgin]

@chukhlov More Information Needed

[jason0x43]

I have experienced something similar using RN 0.63.4 on iOS 14.4. The problem appears to be with the value passed to the Appearance listener.

This is unreliable for me on iOS; the change listener will sometimes receive the incorrect color scheme when the app is restored from background mode, such as by tapping the "back" link in the upper left of the screen:

useEffect(() => {
    const listener = ({colorScheme}: any) => {
      setIsDarkMode(colorScheme === 'dark');
    };
    Appearance.addChangeListener(listener);

    return () => {
      Appearance.removeChangeListener(listener);
    };
  }, []);

This, however, always seems to work:

useEffect(() => {
    const listener = () => {
      setIsDarkMode(Appearance.getColorScheme() === 'dark');
    };
    Appearance.addChangeListener(listener);

    return () => {
      Appearance.removeChangeListener(listener);
    };
  }, []);

The useColorScheme hook also seems to work reliably (and is generally simpler to use than a manually managed Appearance listener).

[1111mp]

I also encountered the same problem.

React.useEffect(() => {
    const _subscription = ({colorScheme}: Appearance.AppearancePreferences) => {
      console.log(colorScheme);
      console.log(Appearance.getColorScheme());
      stores.userStore.setAppTheme(colorScheme!);
    };

    Appearance.addChangeListener(_subscription);

    return () => {
      Appearance.removeChangeListener(_subscription);
    };
  }, []);

The phone is set to dark mode. When my app switches to the background, it will trigger a listener.The colorScheme parameter of the listener method prints light, while the one obtained by Appearance.getColorScheme() is dark.
https://user-images.githubusercontent.com/31227919/117095257-771dad80-ad98-11eb-97d8-929b15d8f611.mov

[ouabing]

Same issue like what @1111mp described. Appearance.addChangeListener will receive a wrong theme when app goes back to foreground.

react-native: 0.64.1

[ThanhNguyen140797]

Same issue like what @1111mp described. Appearance.addChangeListener will receive a wrong theme when app goes back to foreground.

react-native: 0.64.1

same issue

[kesha-antonov]

function handleChange () {
  const theme = Appearance.getColorScheme()
  if (theme === themeStore.theme) return

  runInAction(() => {
    Object.assign(themeStore, {
      theme,
      isDark: theme === 'dark',
    })
  })
}

This worked
Thanks @jason0x43

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.