How to Implement dark mode in React native Classes React navigation 5?

Question

Im trying to implement dark mode to my app. How to do that in classes in React navigation V5

Answer 1

https://stackoverflow.com/a/68005237/11711280 answers this for reactjs

  constructor(props) {
    super(props);//seems to be the same here for reactjs as react-native
    this.darkModeQuery = window.matchMedia(`(prefers-color-scheme: dark)`);
    this.lightModeQuery = window.matchMedia(`(prefers-color-scheme: light)`);
  }
  componentDidMount() {
    this.darkModeListener = navigation.addListener(this.darkModeQuery, this.setDark);
    this.lightModeListener = navigation.addListener(this.lightModeQuery, this.setLight);
  }
  setDark = (darkModeQuery) =>
    this.setState({
      darkMode: darkModeQuery.length !== 0,
      darkModeListener: darkModeQuery
    });
  setLight = (lightModeQuery) =>
    this.setState({
      lightMode: lightModeQuery.length !== 0,
      lightModeListener: lightModeQuery
    });
  componentWillUnmount() {
    const { lightModeListener, darkModeListener } = this.state;
    if (lightModeListener)
      this.lightModeListener.remove();
    if (darkModeListener)
      this.darkModeListener.remove();
  }

https://stackoverflow.com/a/55590338/11711280 I found asking how to translate window.addEventListener(this.mediaQuery,this.myFunc) for this.darkModeListener = navigator.addEventListener(this.mediaQuery,this.myFunc)