title: react-native-appearance not listening to change event for First Time
body: <p>I am trying a setup , So that when I change my System theme my react native app theme should also change.
  I have use react navigation and react-native-appearance.
  On app startup correct system theme is applied,  But when I change theme while using app for first time it doesn't.
  But When I try to change system theme for second time it also changes app theme and works correctly.</p>
  <p>here is my code :-</p>
  <p>App.js</p>
  <pre><code>import React from 'react';
  import {} from 'react-native';
  import {AppearanceProvider} from 'react-native-appearance';
  import Main from './main';
  
  export default function App() {
    
    return (
      &lt;AppearanceProvider&gt;
          &lt;Main/&gt;
      &lt;/AppearanceProvider&gt;
    );
  }
  </code></pre>
  <p>Main.js</p>
  <pre><code>import React, { useState,useEffect } from 'react';
  import {} from 'react-native';
  import {Appearance} from 'react-native-appearance';
  import {DarkTheme,DefaultTheme,NavigationContainer} from '@react-navigation/native';
  import Home from './home';
  
  const myDarkTheme={
      ...DarkTheme,
      colors:{
          ...DarkTheme.colors,    
          text:&quot;#fff&quot;,
          statusBarColor:&quot;#000&quot;
      }
    };
    
    const myLightTheme={
      ...DefaultTheme,
      colors:{
          ...DefaultTheme.colors,
          text:&quot;#000&quot;,
          statusBarColor:&quot;rgb(242, 242, 242)&quot;
      }
    };
  
  
  
  export default function Main(){
      const [theme,setTheme]=useState();
      console.log(theme);
      
     const onThemeChange=()=&gt;{
          const newColor=Appearance.getColorScheme();
          setTheme(newColor);
      }
  
      useEffect(()=&gt;{
          onThemeChange()
  
          const subscription=Appearance.addChangeListener(()=&gt;{
              onThemeChange()
          })
  
          return ()=&gt;subscription.remove();
      },[])
  
      return(
          &lt;NavigationContainer theme={theme === 'light' ? myLightTheme : myDarkTheme}&gt;
              &lt;Home/&gt;
          &lt;/NavigationContainer&gt;
      )
  }
  </code></pre>
  <p>And Home.js</p>
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View,StatusBar } from 'react-native';
  import {useTheme} from '@react-navigation/native';
  
  export default function Home(){
      const {colors}=useTheme();
      return (
        &lt;View style={{...styles.container,backgroundColor:colors.background}}&gt;
          &lt;Text style={{color:colors.text}}&gt;Open up App.js to start working on your app!&lt;/Text&gt;
          &lt;StatusBar barStyle={colors.statusBarColor==='#000' ? 'light-content':'dark-content'} backgroundColor={colors.background}/&gt;
        &lt;/View&gt;
      );
  }
  
  const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    });
  </code></pre>
  <p>Please help me So that theme Changes for first time also when I change system theme for first time after app startup.</p>