Add addChangeListener to react to change in device's system theme

Set initial theme to current device theme
Pick this fix facebook/react-native#28823

App.js

@@ -14,6 +14,7 @@ import SplashScreen from './src/screens/SplashScreen';
 import { createDrawerNavigator } from 'react-navigation-drawer';
 import SelectedCategory from './src/screens/SelectedCategory';
 import VideoPlayer from './src/components/VideoPlayer';
+import { Appearance } from 'react-native';
 
 MaterialCommunityIcons.loadFont();
 Feather.loadFont();
@@ -57,7 +58,6 @@ const AppNavigator = createSwitchNavigator(
 const AppContainer = createAppContainer(AppNavigator);
 
 export default App = () => {
-
   useEffect(() => {
     const rewarded = RewardedAd.createForAdRequest(REWARDS, {
       requestNonPersonalizedAdsOnly: false,
@@ -73,11 +73,13 @@ export default App = () => {
     });
 
     setTimeout(() => {
-      rewarded.load();
-    }, 5000)
+      // rewarded.load();
+    }, 5000);
+
+
   }, []);
 
-  const themeHook = useState('light');
+  const themeHook = useState(Appearance.getColorScheme());
   return (
     <ThemeContext.Provider value={themeHook}>
       <AppContainer />

android/app/src/main/java/com/hksj/MainActivity.java

@@ -17,14 +17,20 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "hksj";
   }
-  
+
   @Override
-      public void onConfigurationChanged(Configuration newConfig) {
-        super.onConfigurationChanged(newConfig);
-        Intent intent = new Intent("onConfigurationChanged");
-        intent.putExtra("newConfig", newConfig);
-        this.sendBroadcast(intent);
-    }
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    getReactInstanceManager().onConfigurationChanged(this, newConfig);
+  }
+
+  // @Override
+  //     public void onConfigurationChanged(Configuration newConfig) {
+  //       super.onConfigurationChanged(newConfig);
+  //       Intent intent = new Intent("onConfigurationChanged");
+  //       intent.putExtra("newConfig", newConfig);
+  //       this.sendBroadcast(intent);
+  //   }
 
   @Override
   protected ReactActivityDelegate createReactActivityDelegate() {

src/screens/CustomDrawerScreen.js

@@ -1,5 +1,6 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { View, Text, FlatList, Switch, StyleSheet, Linking } from 'react-native';
+import { Appearance } from 'react-native';
 
 import ThemeContext from '../theme';
 import { lightTheme } from '../theme/light-theme';
@@ -10,14 +11,25 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 export default function CustomDrawerScreen({ navigation }) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
+
+  useEffect(() => {
+    Appearance.addChangeListener(onThemeChange);
+
+    return () => Appearance.removeChangeListener(onThemeChange);
+  }, [])
+
+  const onThemeChange = () => {
+    setThemeMode(Appearance.getColorScheme());
+  }
+
   const getTheme = (prop) => {
     switch (prop) {
       case 'icon':
         return themeMode === 'light' ? '#000' : '#fff';
       case 'text':
         return themeMode === 'light' ? lightTheme.text : darkTheme.text;
       case 'bgTint':
-        return themeMode === 'light' ? '#eee' : '#01CBC6';
+        return themeMode === 'light' ? '#eee' : '#424242';
       default:
         return null;
     }
@@ -116,7 +128,7 @@ export default function CustomDrawerScreen({ navigation }) {
         <Text style={themeMode === 'light' ? lightTheme.text : darkTheme.text}>
           Black AF Theme
         </Text>
-        <Switch thumbColor="#1a8a98" trackColor={{ false: '#e4e4e4', true: '#358c96' }} value={themeMode === 'dark'} onValueChange={toggleTheme} />
+        <Switch thumbColor="#00E676" trackColor={{ false: '#e4e4e4', true: '#424242' }} value={themeMode === 'dark'} onValueChange={toggleTheme} />
       </View>
     </CommonLayout>
   );