React Native Appearance.addChangeListener() does nothing - themes

Question

I am writing my first react-native app and would like to switch themes like GMail does.
Indeed GMail get darker colors when we change the theme mode, or set automatic dark theme during nights, into the phone settings.
So I try to implement the Appearance.addChangeListener as explained in the doc but unfortunately the feature doesn't work.
I am trying on Android 10.
How can I, without restarting the app, update the color of my application when the phone theme change ?
useEffect(() => {
dispatch(changeTheme(Appearance.getColorScheme()));
Appearance.addChangeListener(onThemeChange);
return () => Appearance.removeChangeListener(onThemeChange);
}, []);
// This function is never call
const onThemeChange = ({ colorScheme }) => {
console.log("onThemeChange", colorScheme)
dispatch(changeTheme(colorScheme));
}

Answer 1

I resolved this problem by adding this code to MainActivity.java:
import android.content.res.Configuration;
#Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
getReactInstanceManager().onConfigurationChanged(this, newConfig);
}
and for testing this feature, you can change DarkTheme in Android 10 and above ON/OFF.

Answer 2

useColorScheme
you can use useColorScheme, it will update automatically.
first
import {useColorScheme} from 'react-native;
then, in you functional component
const colorScheme = useColorScheme();
I also suggest to write your own custom hook to update StatusBar and NavigationBar on colorScheme changed

Answer 3

use useColorScheme
It will change the dark and light mode automatically
import {useColorScheme} from 'react-native;
then,for class component
componentDidMount() {
Appearance.getColorScheme()=='dark'?this.setState({ theme: true }): this.setState({ theme: false});
}
componentDidUpdate(){
this.listener =Appearance.addChangeListener((theme) => {
// console.log("theme", theme);
theme.colorScheme == "dark"
? this.setState({ theme: true })
: this.setState({ theme: false });
});
}