react-native-reusables icon indicating copy to clipboard operation
react-native-reusables copied to clipboard

[ BUG ] App does not actively listen to system theme changes

Open JeremyXXXuuu opened this issue 10 months ago • 1 comments

Describe the bug When the app is set to follow the system theme mode, changing the theme via the iPhone Control Center does not instantly update the app's theme. Instead, the app only detects the theme change after closing the Control Center. This behavior is inconsistent with the expected behavior of React Native's built-in useColorScheme hook, which should trigger theme changes immediately, even while the Control Center is open.

To Reproduce Steps to reproduce the behavior:

  1. Set the app to follow the system theme mode.
  2. Open the iPhone Control Center.
  3. Change the theme (e.g., from light to dark or vice versa).
  4. Observe that the app's theme does not update until the Control Center is closed.

Expected behavior The app should instantly update the theme in response to system theme changes, even when the Control Center is open.

Screenshots If applicable, add screenshots to help explain your problem.

https://github.com/user-attachments/assets/3cdfd6a6-4f89-47a1-9743-60a85a903306

https://github.com/user-attachments/assets/51243747-2685-424f-85d2-80b2fb997af0

Platform (please complete the following information):

  • Type: [ iphone 15 pro]
  • OS: [ios 18]
  • Expo Go

Additional context

  • The useColorScheme hook from React Native is known to detect theme changes immediately, even when the Control Center is open.
  • It seems the app's current implementation may not be leveraging useColorScheme effectively to detect system theme changes in real time.

JeremyXXXuuu avatar Jan 23 '25 15:01 JeremyXXXuuu

Hey @JeremyXXXuuu, I believe this is how NativeWind is set up: https://github.com/nativewind/nativewind/blob/main/packages/react-native-css-interop/src/runtime/native/appearance-observables.ts#L101

NativeWind seems to have an event listener on the appearance change but it only updates the color scheme when the app state is active.

Can you create this issue for NativeWind's repo?

mrzachnugent avatar Jan 24 '25 21:01 mrzachnugent