Fix theme changing with 3rd party library

Untill facebook/react-native#28823 will be fixed
vaagnavanesyan · Jul 13, 2020 · d1003ad · d1003ad
1 parent 5193b13
commit d1003ad
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/android/app/src/main/java/com/vaagnavanesyan/piligrim/MainActivity.java b/android/app/src/main/java/com/vaagnavanesyan/piligrim/MainActivity.java
@@ -1,7 +1,8 @@
 package com.vaagnavanesyan.piligrim;
 
 import com.facebook.react.ReactActivity;
-
+import android.content.Intent;
+import android.content.res.Configuration;
 public class MainActivity extends ReactActivity {
 
   /**
@@ -12,4 +13,12 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "piligrim";
   }
+
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    Intent intent = new Intent("onConfigurationChanged");
+    intent.putExtra("newConfig", newConfig);
+    sendBroadcast(intent);
+  }
 }
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "postinstall-postinstall": "^2.1.0",
     "react": "16.13.1",
     "react-native": "0.63.0",
+    "react-native-appearance": "^0.3.4",
     "react-native-cheerio": "^1.0.0-rc.4",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-reanimated": "^1.9.0",

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -2,9 +2,10 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
 import { SafeAreaView } from 'react-native';
+import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
 
-import { MoviesFeed, MovieCard } from './components';
-import { Themes, ThemeContext } from './themes';
+import { MovieCard, MoviesFeed } from './components';
+import { ThemeContext, Themes } from './themes';
 
 const Stack = createStackNavigator();
 
@@ -13,25 +14,28 @@ const DashboardScreen = (props: any) => <MoviesFeed {...props} />;
 const MovieScreen = ({ route }: any) => <MovieCard {...route.params} />;
 
 const App = () => {
+  const theme = useColorScheme() === 'dark' ? 'dark' : 'light';
   return (
-    <ThemeContext.Provider value={Themes.light}>
-      <SafeAreaView style={{ flex: 1 }}>
-        <NavigationContainer>
-          <Stack.Navigator initialRouteName="Dashboard">
-            <Stack.Screen
-              name="Dashboard"
-              component={DashboardScreen}
-              options={{ headerShown: false }}
-            />
-            <Stack.Screen
-              name="Movie"
-              component={MovieScreen}
-              options={{ headerShown: false }}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
-      </SafeAreaView>
-    </ThemeContext.Provider>
+    <AppearanceProvider>
+      <ThemeContext.Provider value={Themes[theme]}>
+        <SafeAreaView style={{ flex: 1 }}>
+          <NavigationContainer>
+            <Stack.Navigator initialRouteName="Dashboard">
+              <Stack.Screen
+                name="Dashboard"
+                component={DashboardScreen}
+                options={{ headerShown: false }}
+              />
+              <Stack.Screen
+                name="Movie"
+                component={MovieScreen}
+                options={{ headerShown: false }}
+              />
+            </Stack.Navigator>
+          </NavigationContainer>
+        </SafeAreaView>
+      </ThemeContext.Provider>
+    </AppearanceProvider>
   );
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -3387,6 +3387,13 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbemitter@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  integrity sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=
+  dependencies:
+    fbjs "^0.8.4"
+
 fbjs-css-vars@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
@@ -6475,6 +6482,15 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.8.1, react-is@^16.8.4, react-
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-native-appearance@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/react-native-appearance/-/react-native-appearance-0.3.4.tgz#2cbcbc5142cdc1898c116684f519b16c879cbec2"
+  integrity sha512-Vz3zdJbAEiMDwuw6wH98TT1WVfBvWjvANutYtkIbl16KGRCigtSgt6IIiLsF3/TSS3y3FtHhWDelFeGw/rtuig==
+  dependencies:
+    fbemitter "^2.1.1"
+    invariant "^2.2.4"
+    use-subscription "^1.0.0"
+
 react-native-cheerio@^1.0.0-rc.4:
   version "1.0.0-rc.4"
   resolved "https://registry.yarnpkg.com/react-native-cheerio/-/react-native-cheerio-1.0.0-rc.4.tgz#bab0c1fe5888bbd69481d9b928d58b525f18f3b1"