useColorScheme() returns incorrect value when app is moved to the background on iOS

[janoslc]

Description

useColorScheme() call returns a momentarily incorrect value when the app is moved to the background. When bringing the app back in the foreground it causes a flashing behaviour, because all the components support dark and light theme.
The issue appears on ExpoGo as well as on a physical device.

Steps to reproduce

1. Set up a minimal environment for React Native on iOS
2. Call scheme = useColorScheme()
3. console.log scheme
4. Move the app to the background (ex.: switch to another app)
5. Move back the app in the foreground
6. See how scheme value was changed (to dark if you were on light theme or inverse) when the app was moved to the background and changed back again

React Native Version

0.76.7

Affected Platforms

Runtime - iOS

Output of npx react-native info

(node:86266) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Fetching system and libraries information...
System:
  OS: macOS 15.3
  CPU: (10) arm64 Apple M1 Pro
  Memory: 203.02 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.6.0
    path: /usr/local/bin/node
  Yarn: Not Found
  npm:
    version: 11.0.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "33"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.2
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-UpsideDownCake-ext5 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.7
    wanted: 0.76.7
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

info React Native v0.77.0 is now available (your project is running on v0.76.7).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.77.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.7&to=0.77.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Stacktrace or Logs

Not applicable - it's a visual issue.

Reproducer

https://snack.expo.dev/@janoslc/react-native-usecolorscheme-issue

Screenshots and Videos

The Snack in Expo Go looks like this:

ScreenRecording_02-11-2025.mp4

Having a bigger project with multiple components reduces the speed of re-rendering and it causes a flashing effect:

ScreenRecording_02-11-2025.17-13-21_1.mov

[janoslc]

Related issue: #35972

[artur-burlak]

Have same issues. Not happens all the time, but happens

[sarthak-d11]

Hi @janoslc,

I am unable to reproduce this issue with the reproducer you have provided. I am currently testing it on a simulator. Could you please confirm if reproducing it on a real device is required?

Additionally, I noticed that there are no details of the New Architecture in the output of your npx react-native info. Could you please share those details as well?

[janoslc]

Hey @sarthak-d11

• It can be reproduced in Expo Go using an iOS simulator. Not particularly the flashing behavior, but the incorrect value of useColorScheme() at the moment when the app is moved to the background
• New Arch is enabled

[riteshshukla04]

This is actually expected behaviour from iOS and happens on native iOS too.

Please refer https://stackoverflow.com/questions/63372625/ios-dark-mode-user-interface-style-changes-back-and-forth-on-entering-on-the-ba

[artur-burlak]

@riteshshukla04 okay, but should be flickering should not appear anyway. And it was not on bridglessMode OFF

[riteshshukla04]

#35972 (comment)

Maybe use something like above

[zhongwuzw]

Hi, does #49431 work for you?

[janoslc]

Hey @riteshshukla04. I tried, unfortunately it's not a solution for me.
@zhongwuzw I'll test it ASAP.

[janoslc]

@zhongwuzw how can I run it against my local setup? I tried applying the same modification as #49431 inside of node_modules/, which I suspect wasn't the right solution. If it was correct, then it didn't solve the issue.

[zhongwuzw]

@janoslc You can change it in AwesomeProject/node_modules/react-native/React/Base/Surface/SurfaceHostingView, rebuild and rerun the project. I tested the repro you provided, it should work :)

[janoslc]

I applied the modification, unfortunately it didn't help. To be sure I also checked it on a real device - it had the same result.

const scheme = useColorScheme();
console.log('Scheme printed out: ', scheme);

This still prints out both dark and light when moving the app into the background. My iOS Simulator's theme is light

[zhongwuzw]

@janoslc Hi, the screenshot is how I tested it.

https://github.com/zhongwuzw/zhongwuzw.github.io.resource/blob/458c7cc40865d4cc24521908972102debbfdc59f/images/tmp/14405.gif

[janoslc]

It doesn't work. To be sure I tried a couple of things:

• Upgraded Simulator to iOS 18.2
• Expo Go with RN 0.76.7
• Real device with RN 0.76.7
• Real device with RN 0.77.0

What could be the difference between our environments?

[janoslc]

@artur-burlak can you please also test this modification on your project?

[janoslc]

It would be friendly to explain why this is closed. I understand the code works on your side, it doesn't on mine

[zhongwuzw]

@janoslc Hi, the issue is auto-closed when the pr landed. The PR is reviewed by the core team. And I think maybe there has some differences that we missed. Can you have a screenshot like me to show how you applied the commit?

[janoslc]

@zhongwuzw Here it is:

[zhongwuzw]

@janoslc Hi, Because we changed the native code, so we need to rebuild the framework. Do you know how to run using Xcode? Running using Xcode can rebuild the react native core code.

[janoslc]

@zhongwuzw Understood and thank you. No, I'm not familiar with building the framework.

[bryanmylee]

@janoslc @zhongwuzw Leaving a note here to confirm that the patch works as expected. I ran into the flickering issue on 0.77.1, applying this patch and rebuilding works.