feat: Support dark mode in react-navigation

Author: Sanjeev Yadav

__mocks__/react-native-appearance.js

@@ -0,0 +1 @@
+export * from 'react-native-appearance/src/mock';

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

@@ -1,6 +1,8 @@
 package com.rnmagentographql;
 
 import com.facebook.react.ReactActivity;
+import android.content.Intent;
+import android.content.res.Configuration;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +14,12 @@ public class MainActivity extends ReactActivity {
   protected String getMainComponentName() {
     return "RNMagentoGraphQL";
   }
+
+  @Override
+  public void onConfigurationChanged(Configuration newConfig) {
+    super.onConfigurationChanged(newConfig);
+    Intent intent = new Intent("onConfigurationChanged");
+    intent.putExtra("newConfig", newConfig);
+    sendBroadcast(intent);
+  }
 }

package.json

@@ -26,6 +26,7 @@
     "i18n-js": "^3.8.0",
     "react": "16.13.1",
     "react-native": "0.63.3",
+    "react-native-appearance": "^0.3.4",
     "react-native-elements": "^3.0.1",
     "react-native-gesture-handler": "^1.9.0",
     "react-native-localize": "^2.0.1",

src/App.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { Appearance, AppearanceProvider } from 'react-native-appearance';
 import { ThemeProvider } from 'react-native-elements';
 import { OverflowMenuProvider } from 'react-navigation-header-buttons';
 import Navigator from './navigation';
@@ -8,22 +9,36 @@ import { theme } from './theme';
 import { Spinner } from './components';
 
 const App = (): React.ReactElement => {
+  const [colorScheme, setColorScheme] = useState('light');
   const [client, setClient] = useState<ApolloClient<any>>();
 
+  console.log(colorScheme);
+
   useEffect(() => {
     getApolloClient()
       .then(setClient)
       .catch(e => console.log(e));
+
+    const subscription = Appearance.addChangeListener(
+      ({ colorScheme: newColorScheme }) => {
+        // do something with color scheme
+        setColorScheme(newColorScheme);
+      },
+    );
+
+    return () => subscription.remove();
   }, []);
 
   if (client) {
     return (
       <ApolloProvider client={client}>
-        <ThemeProvider theme={theme}>
-          <OverflowMenuProvider>
-            <Navigator />
-          </OverflowMenuProvider>
-        </ThemeProvider>
+        <AppearanceProvider>
+          <ThemeProvider useDark={colorScheme === 'dark'}>
+            <OverflowMenuProvider>
+              <Navigator />
+            </OverflowMenuProvider>
+          </ThemeProvider>
+        </AppearanceProvider>
       </ApolloProvider>
     );
   }

src/components/CustomHeaderButtons/CustomHeaderButtons.tsx

@@ -6,16 +6,20 @@ import {
   HeaderButtonProps,
   HeaderButtonsProps,
 } from 'react-navigation-header-buttons';
+import { useTheme } from '@react-navigation/native';
 
 // define IconComponent, color, sizes and OverflowIcon in one place
-const CustomHeaderButton = (props: HeaderButtonProps) => (
-  <HeaderButton
-    IconComponent={MaterialIcons}
-    iconSize={23}
-    color="black"
-    {...props}
-  />
-);
+const CustomHeaderButton = (props: HeaderButtonProps) => {
+  const { colors } = useTheme();
+  return (
+    <HeaderButton
+      IconComponent={MaterialIcons}
+      iconSize={23}
+      color={colors.text}
+      {...props}
+    />
+  );
+};
 
 export const CustomHeaderButtons = (props: HeaderButtonsProps) => {
   return (

src/navigation/RootNavigator.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  DarkTheme,
+  DefaultTheme,
+  NavigationContainer,
+} from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { useColorScheme } from 'react-native-appearance';
 import StackNavigator from './StackNavigator';
 import { DrawerScreen } from '../screens';
 import { useCart } from '../logic/cart/useCart';
 
 const Drawer = createDrawerNavigator();
 
 const RootNavigator = () => {
+  const scheme = useColorScheme();
   const { cartId } = useCart();
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Drawer.Navigator drawerContent={props => <DrawerScreen {...props} />}>
         <Drawer.Screen
           name="drawer"