[iOS] useColorScheme changes value when app is backgrounded

[ealmiladi]

Description

On a fresh npx react-native init {appName} project on iOS, if you console.log({isDarkMode}) and move the app to the background, you'll notice these sets of logs. It seems that the useColorScheme hook is reporting that the user's theme setting has been changed, although it hasn't changed at all. Bringing the app to the foreground again resolves the issue, but causes screen flickers on elements that rely on the value. This issue does not affect Android.

 LOG  {"isDarkMode": true} // app is in foreground and is currently in dark mode
 LOG  {"isDarkMode": false} // app is backgrounded and is _still_ in dark mode
 LOG  {"isDarkMode": true} // app is in foreground

Version

0.70.6 - 0.71.1

Output of npx react-native info

System:
OS: macOS 12.5.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 45.07 MB / 32.00 GB
Shell: 5.8.1 - /usr/local/bin/zsh
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /Users/ealimadi/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9123335
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.13 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. npx react-native init demo
2. Run iOS
3. console.log({isDarkMode})
4. Put app into background
5. Put app back into foreground
6. Review generated logs

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

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  console.log({isDarkMode})

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

[sdmoir]

I'm experiencing this same issue on React Native 0.67.4.

My workaround for the time being to prevent screen flickering:

const colorScheme = useColorScheme()
const [currentColorScheme, setCurrentColorScheme] = useState(colorScheme)
const onColorSchemeChange = useRef<NodeJS.Timeout>()

// Add a 1 second delay before switching color scheme
// Cancel if color scheme immediately switches back
useEffect(() => {
  if (colorScheme !== currentColorScheme) {
    onColorSchemeChange.current = setTimeout(() => setCurrentColorScheme(colorScheme), 1000)
  } else if (onColorSchemeChange.current) {
    clearTimeout(onColorSchemeChange.current)
  }
}, [colorScheme])

// <App theme={currentColorScheme}> ...

[ealmiladi]

I'm experiencing this same issue on React Native 0.67.4.

My workaround for the time being to prevent screen flickering:

const colorScheme = useColorScheme()
const [currentColorScheme, setCurrentColorScheme] = useState(colorScheme)
const onColorSchemeChange = useRef<NodeJS.Timeout>()

// Add a 1 second delay before switching color scheme
// Cancel if color scheme immediately switches back
useEffect(() => {
  if (colorScheme !== currentColorScheme) {
    onColorSchemeChange.current = setTimeout(() => setCurrentColorScheme(colorScheme), 1000)
  } else if (onColorSchemeChange.current) {
    clearTimeout(onColorSchemeChange.current)
  }
}, [colorScheme])

// <App theme={currentColorScheme}> ...

Here's my workaround avoiding the useColorScheme hook completely:

    const [currentTheme, setTheme] = useState<ColorSchemeName>(
        getColorScheme(),
    );

    useEffect(() => {
        AppState.addEventListener('change', nextAppState => {
            if (nextAppState === 'active') {
                const theme = getColorScheme();
                setTheme(theme);
            }
        });
    }, []);

[luicfrr]

any preview when this issue will be fixed?
Having same problem on RN version 0.71.7

[batuhansahan]

i am experiencing this one on 0.71.8
only in development not in release

edit:after upgrade 0.72.3 it happens of release too.

[byteab]

this hook might help, didn't test it tbh 😀

function useForegroundColorScheme() {

   const colorScheme = useColorScheme()
   const lastCorrectColorScheme = useRef(null)
   if(!lastCorrectColorScheme.current) {
       lastCorrectColorScheme.current = colorScheme
   }
   return React.useMemo(() => {
     const appState = AppState.currentState
     if(Platform.OS === 'ios' && appState.match(/inactive|background/)) {
        return lasCorrectColorScheme.current
     } else {
        lastCorrectColorScheme.current = appState
        return lastCorrectColorScheme.current
     }
   }, [colorScheme])
}

[visoft]

useColorScheme changing in the background is causing Rendered fewer hooks than expected. This may be caused by an accidental early return statement. in React Native 0.71.10 when I use it in App.tsx.

[batuhansahan]

This error happening to me in release build on iOS.

Steps
1-Open Another app, Open your react-native app
2-Switch other app
3-Switch back to your app

• useColorScheme shows wrong theme for 1 sec then getting back to correct theme.

React native 0.72.3
Without new architecture.

[YaoHuiJi]

It happens on RN 0.72.0 too

[uhhhsoyan]

Experiencing this on 0.72.4, hermes enabled but without new architecture

[mhaanstra-wearetriple]

This is a result of the OS taking what is called a 'snapshot' on iOS, to facilitate the preview when you browse your open applications; a snapshot is required for both light & dark mode in case you change modes while on the open application screen, so the OS will report a brief moment in time both light & dark mode where the app should respond to these modes, or risk a flawed snapshot

[MateWW]

I've done a deeper investigation on that topic and it is the expected behavior of a native IOS application.

Outcomes

As @mhaanstra-wearetriple mentioned it is called a "snapshot" that IOS will take when you go to the background.
IOS is preparing screenshots of your application in both light and dark mode and will use them in app switcher view.
This mechanism is not perfect in my opinion but on the other hand, it seems to be the only option to handle app switcher especially since a lot of users have tons of applications. Trying to rerender all applications that are open at once to change appearance sounds like an overkill.

React native behaviour

I've validated that mechanism and as you may see in the attached video this works correctly for native apps.
However, react-native stays in one initial appearance mode.

Hypothesis

I've noticed that render on the JS side is done properly but the draw phase is not happening.
It seems to be happening right after the foreground as we see a smooth transition while the mode is changed.

Questions:

• Do you think this feature should be supported by react native?
• If not can we trigger an appearance update only if a state is different than background?

50-appearence-issue.mp4

[salman-ar-sar]

This is still an issue on 0.72.6, why was it closed?

[MateWW]

@salman-ar-sar Fix will be available in 0.73 based on changelog

[salman-ar-sar]

@salman-ar-sar Fix will be available in 0.73 based on changelog

Oh okay. That's good to hear. Do we have an estimated timeline for the 0.73 release?

[timothyerwin]

yeah, I think I'm seeing something similar. when I bring it back it's redrawing the entire screen first in dark mode, then back to the light mode...

[timothyerwin]

This is a result of the OS taking what is called a 'snapshot' on iOS, to facilitate the preview when you browse your open applications; a snapshot is required for both light & dark mode in case you change modes while on the open application screen, so the OS will report a brief moment in time both light & dark mode where the app should respond to these modes, or risk a flawed snapshot

"in case"? lol, seems very lazy and inefficient of the iOS developers here...wouldn't they know when the color scheme changes and only trigger a snapshot then?

[Darren120]

still exist on new version. using expo. RN 0.73

[git-user-1337]

Why was this closed if it's still not fixed?

[marcos-vinicius-mafei]

Still not fixed :/

[Georg7]

This is a terrible user experience - and still not fixed

[RhonnieAl]

@MateWW Fix will be available in 0.73 based on changelog

RN 0.74 and still not fixed 🥲

[Robert27]

This reappears after upgrading to RN 0.76 with new arch enabled.

[chichilatte]

The crappy thing is iOS doesn't even manage to take a snapshot of your app in both light and dark themes, since it's preventing JavaScript from doing a rerender until your app foregrounds again!

So when you background your app and go change the system theme, then bring up the app switcher again, your app's snapshot is still in the old theme. It's a tough problem! For now the best solution seems to be to stop iOS taking two different snapshots by debouncing your system theme change listener. Not ideal but better than the default behaviour.

[andresribeiro]

This reappears after upgrading to RN 0.76 with new arch enabled.

+1

[MihirP24]

I am also having the same issue, does anybody know any solution , this is my code

const updateTheme = (newTheme) => {
let mode;
if (
(newTheme.system === theme.system && theme.mode === newTheme.mode) ||
(newTheme.mode === undefined &&
theme.system === true &&
newTheme.system === true)
) {
return;
}
if (newTheme) {
if (newTheme.system) {
// for autoBGChange, to avoid calling the Appearance.getColorScheme
if (newTheme.bgChange) {
mode = newTheme.mode === "dark" ? "dark" : "light";
newTheme = { ...newTheme, mode, system: true };
} else {
mode = systemColorScheme === "dark" ? "dark" : "light";
newTheme = { ...newTheme, mode, system: true };
}
} else {
newTheme = { ...newTheme, system: false };
}
}
setTheme(newTheme);
storeData("Theme", newTheme);
};

useEffect(() => {
const onColorSchemeChange = (colorScheme) => {
if (theme.system) {
updateTheme({
system: true,
bgChange: true,
mode: colorScheme.colorScheme,
});
}
};

const appearanceListener =
  Appearance.addChangeListener(onColorSchemeChange);

// Cleanup listener when component unmounts
return () => appearanceListener.remove();

}, [theme.system, theme.bgChange, theme.mode]);

[andresribeiro]

@MihirP24 the solution provided by @ealmiladi above worked for me

[janoslc]

Hey followers! As of my research on this topic ReactNative 0.77.0 includes the modifications to fix this behaviour. It will be released next week.
Relevant changes: 6118aff

Release info: https://github.com/facebook/react-native/releases/tag/v0.77.0-rc.6

In my case a simple workaround just wasn't enough since I use react-native-ui-lib and it has it's own internal reference to useColorScheme() in order to automatically set its theme.