[ BUG ] Light/Dark mode doesn't switch when toggle the devices system appearance

[badddams]

Describe the bug
I've implemented the setup as explained in the docs for handling light and dark mode but when I toggle the appearance settings in the simulator or even on my device using expo it doesn't seem to switch modes. Every now an then it works but it's very very occasional. I can't work out if this is an RNR problem or nativewind problem or if I'm doing something wrong.

To Reproduce
Steps to reproduce the behavior:

1. Start a react native app using the basic light dark mode setup in the RNR docs
2. Toggle device appearance

Expected behavior
I'd expect the device to effortlessly switch between the two themes

Platform (please complete the following information):

• Type: iPhone simulator, iphone 16 pro. Also real iPhone device using expo go
• OS: [e.g. iOS] iOS 18.0

[mrzachnugent]

@badddams did you remove the AsyncLocalStorage feature from you root _layout? https://github.com/mrzachnugent/react-native-reusables/blob/main/apps/showcase/app/_layout.tsx#L45

[mrzachnugent]

Might be a good idea to remove the async local storage functionality completely from the starter-base template

[badddams]

Thanks @mrzachnugent I've had a look at it looks to me like colorScheme is never being triggered by an appearance change with the simulator or with a real device.

I'm not sure if it's something wrong with the underlying library i.e. nativewinds hook or something else?

[badddams]

Alright, I've managed to resolve this by:

1. removing the async local storage code functionality (not entirely sure on the use case for this being useful, maybe for web?)
2. running npx expo prebuild --clean (not sure if this actually does anything)

Anyway, those two things seem to make my app respect whatever setting is set on the device.

Perhaps it would be useful to add something to the docs to save any future misunderstandings? @mrzachnugent

Thanks again for your help ☺️