React Native `useColorScheme()` hook stops working when using presentation: 'fullScreenModal'

[jforaker]

Description

Current behavior I am trying to present a Stack.Navigator as a fullScreenModal of a different stack, like so:

<Stack.Navigator
  initialRouteName="Splash"
  screenOptions={{
    ...GlobalStackOptions,
    headerTintColor: design.primaryText as string,
  }}>
  {/* Modal flows */}
  <Stack.Group
    screenOptions={{presentation: 'fullScreenModal', headerShown: false}}>
    <Stack.Screen name="MyScreen" component={ScreenComponent} />
  </Stack.Group>
</Stack.Navigator>

My app needs to support light and dark mode, which I am doing by utilizing React Native's useColorScheme() hook. The rest of my app responds instantly to changes in the user's color scheme preference, but when a screen is in a fullScreenModal context, useColorScheme stops returning a correct value when the device color scheme changes.

Using formSheet works properly.

fullScreenModal: https://github.com/react-navigation/react-navigation/assets/66689851/8931a780-3ae2-42ca-8ced-d968ae25cd23

formSheet: https://github.com/react-navigation/react-navigation/assets/66689851/1d3740da-70a1-4b4b-9931-a01aa159beba

Expected behavior I expect the UI to respond properly to the system color scheme when a screen is presented via a fullScreenModal.

Steps to reproduce

1. add this to a fullScreenModal screen:

  const scheme: ColorSchemeName = useColorScheme();
  console.log('scheme: ', scheme);

2. Open that screen in your app
3. Toggle the system appearance using one of several methods (xcode menu, settings etc)
4. See the console log is not triggered
5. Do this with any other screen type like a formSheet or a regular push screen and you'll see the value gets toggled properly

Snack or a link to a repository

https://snack.expo.dev/w8orUoZon

Note I'm getting an error in snack but you should be able to use this code to check on a real device, following the Steps above.

Screens version

3.20.0

React Native version

0.72.3

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

None

Build type

Release mode

Device

Real device

Device model

IOS 17 iPhone 13 Pro

Acknowledgements

Yes

[jforaker]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

Like I said, just a console.log is enough to see the issue happening.

Edit: I added https://snack.expo.dev/w8orUoZon There seems to be an error in snack View config getter callback for component RNSScreenmust be a function (receivedundefined). But you should be able to use the code.

[chrysb]

This seems to still be happening. Any fix in sight?