ios wont trigger re-render with appearance.setColorSheme() on app start

[Pluvas159]

Description

When using Appearance.setColorScheme on app start, the change doesnt trigger a re-render in ios. I used the latest react native bare app and added a Appeareance.setColorScheme('white') in app component.
This works on android, thus the app will start in white mode. But it doesnt work on ios, the app starts in system mode nevertheless.
But the colorScheme is set to white, because if i want to set it to white again to trigger re-render manually, nothing happens, because i want to change it to the same value it is set to.

React Native Version

0.72.3

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M1 Pro
Memory: 79.59 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.17.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.0
path: /usr/local/bin/npm
Watchman:
version: 2023.07.24.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.0
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.2
- iOS 16.2
- macOS 13.1
- tvOS 16.1
- watchOS 9.1
Android SDK:
API Levels:
- "28"
- "30"
- "31"
- "33"
Build Tools:
- 29.0.2
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
System Images:
- android-31 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode:
version: 14.2/14C18
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20
path: /opt/homebrew/opt/openjdk@11/bin/javac
Ruby:
version: 3.2.2
path: /Users/user/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

• new react native application
• Appearance.setColorScheme() at the start of the app, i use layouteffect in app

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

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

  useLayoutEffect(() => {
    Appearance.setColorScheme('light');
  }, []);
.
.
.

Snack, screenshot, or link to a repository

https://github.com/Pluvas159/appearanceIOS

Screen.Recording.2023-08-02.at.12.07.50.mov

[github-actions]

⚠️	Add or Reformat Version Info
ℹ️	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[cortinico]

Could you put this in a Snack @Pluvas159 ?

[Pluvas159]

Could you put this in a Snack @Pluvas159 ?

i'm not using expo, and the appearance implementation is different in expo i think ? @cortinico

[cortinico]

Regardless of whether you use Expo or not, we need a reproducer of some sort as suggested here #38753 (comment)

[Pluvas159]

Regardless of whether you use Expo or not, we need a reproducer of some sort as suggested here #38753 (comment)

https://github.com/Pluvas159/appearanceIOS here you go

[gkasdorf]

I've had reports of this as well Memmy-App/memmy#896

I've had other issues with useColorScheme such as what is reported here #35972

@Pluvas159 Wondering if you have the same result (and don't have the time to pull down the repo you provided)... Does running in a simulator (or in production for that matter) and manually changing between dark and light mode work correctly? All of my testing showed the switch functioning correctly and users state that manually switching the setting in iOS settings will result in a re-render, but users claim that the automatic transition does not work.

@cortinico I'd put it in a Snack myself, but frankly I'm not sure how to reproduce it correctly. In simulators, doing the manual switch in iOS settings results in the re-render as expected, but it doesn't work for the automatic transition at time/sunset-sunrise. If there's some way to do so let me know.

[Pluvas159]

@gkasdorf I have set three buttons in user settings for dark theme, light theme and system theme. Everything works as wished but the bug on ios was that after reload, i needed to manually set the preffered theme so that my app would follow the user's theme (dark, light or just use system). I encountered that i have different result on IOS and on Android as is shown in the video.

I also figured out yesterday that the issue is with the reload functionality and the simulator. When i have the app in testflight, everything works perfectly.
Thus, depending on the user's preference, the theme of the app would be dark, light or system(and that would change immediately, when system preffered theme is changed)

I looked to your issues that you referenced, but I reckon these aren't related, as everything works for me. I have not yet tested the sunset/sunrise change, but I reckon it should work.

[vonovak]

Not a fix but I created a lib for this use case - it sets the color scheme upon start before any rendering takes place: https://github.com/vonovak/react-native-theme-control