React native change color scheme in real time problem android

Question

What I'm doing is giving the user the possibility to change the color of the device scheme ( light or dark ) in real time.

On ios it works, when on the device I press the key combination: Command + Uppercase + A .

Event is intercepted, and the theme is changed in real time.

When on Android I try to change the theme color from the button menu, as you can see from the image.

The event is not intercepted I have to exit the app for a moment and then re-enter to make the changes happen.

I'm using import {useColorScheme} from 'react-native' .

I also tried import {useColorScheme} from 'react-native-appearance' , but on ios the realtime thing doesn't work.

How can I solve?

Answer 1

I had a similar issue, on iOS the theme change worked fine however on Android it did not trigger a re-render.

I fixed this by doing the following thing: Create an appstate listener which detects when an app is coming back from the background to the foreground .

Then in the listener function I checked if the current theme is equal to the theme selected in the device. If the theme changed I updated my redux store which contains my colorScheme.

And by doing that all my components subscribed to my reduxstate just re-renderd.