refactor: Support dark mode in react-native-elements & in app

Author: Sanjeev Yadav

src/App.tsx

@@ -1,19 +1,22 @@
 import React, { useEffect, useState } from 'react';
-import { Appearance, AppearanceProvider } from 'react-native-appearance';
+import {
+  Appearance,
+  AppearanceProvider,
+  ColorSchemeName,
+} from 'react-native-appearance';
 import { ThemeProvider } from 'react-native-elements';
 import { OverflowMenuProvider } from 'react-navigation-header-buttons';
 import Navigator from './navigation';
 import { ApolloClient, ApolloProvider } from '@apollo/client';
 import { getApolloClient } from './apollo/client';
-import { theme } from './theme';
+import { lightTheme, darkTheme } from './theme';
 import { Spinner } from './components';
 
 const App = (): React.ReactElement => {
-  const [colorScheme, setColorScheme] = useState('light');
+  const [ready, setReady] = useState(false);
+  const [colorScheme, setColorScheme] = useState<ColorSchemeName>();
   const [client, setClient] = useState<ApolloClient<any>>();
 
-  console.log(colorScheme);
-
   useEffect(() => {
     getApolloClient()
       .then(setClient)
@@ -29,11 +32,19 @@ const App = (): React.ReactElement => {
     return () => subscription.remove();
   }, []);
 
-  if (client) {
+  useEffect(() => {
+    setColorScheme(Appearance.getColorScheme());
+    setReady(true);
+  }, []);
+
+  if (ready && client) {
     return (
       <ApolloProvider client={client}>
         <AppearanceProvider>
-          <ThemeProvider useDark={colorScheme === 'dark'}>
+          <ThemeProvider
+            useDark={colorScheme === 'dark'}
+            theme={colorScheme === 'dark' ? darkTheme : lightTheme}
+          >
             <OverflowMenuProvider>
               <Navigator />
             </OverflowMenuProvider>

src/components/ProductListItem/ProductListItem.tsx

@@ -17,7 +17,6 @@ interface Props {
 
 const COLUMN_WIDTH = DIMENS.common.WINDOW_WIDTH / 2;
 
-// TODO: remove hard-coded color & dimension vaues
 const ProductListItem = ({
   item,
   index,
@@ -35,7 +34,10 @@ const ProductListItem = ({
       <View
         style={[
           styles.container,
-          { borderColor: theme.colors?.divider },
+          {
+            borderColor: theme.colors?.divider,
+            backgroundColor: theme.colors?.white,
+          },
           horizontalMode && styles.topBorder,
           (horizontalMode || index % 2 !== 0) && styles.leftBorder,
         ]}
@@ -55,7 +57,6 @@ const styles = StyleSheet.create({
     flex: 1,
     width: COLUMN_WIDTH,
     borderBottomWidth: DIMENS.common.borderWidth,
-    backgroundColor: 'white',
     overflow: 'hidden',
   },
   leftBorder: {

src/constants/dimens.ts

@@ -21,6 +21,9 @@ const DIMENS = Object.freeze({
     imageWidth: moderateScale(70),
     imageHeight: moderateScale(70),
   },
+  featuredProductList: {
+    titleFontSize: moderateScale(16),
+  },
   homeScreen: {
     carouselHeight: moderateScale(200),
   },

src/navigation/RootNavigator.tsx

@@ -1,22 +1,21 @@
 import React from 'react';
-import {
-  DarkTheme,
-  DefaultTheme,
-  NavigationContainer,
-} from '@react-navigation/native';
+import { 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';
+import { navigationLightTheme, navigationDarkTheme } from '../theme';
 
 const Drawer = createDrawerNavigator();
 
 const RootNavigator = () => {
   const scheme = useColorScheme();
   const { cartId } = useCart();
   return (
-    <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <NavigationContainer
+      theme={scheme === 'dark' ? navigationDarkTheme : navigationLightTheme}
+    >
       <Drawer.Navigator drawerContent={props => <DrawerScreen {...props} />}>
         <Drawer.Screen
           name="drawer"

src/screens/CartScreen/CartScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { Text } from 'react-native-elements';
 
 const CartScreen = (): React.ReactElement => (
   <View>

src/screens/HomeScreen/FeaturedProductList.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { View, FlatList, StyleSheet } from 'react-native';
-import { Text } from 'react-native-elements';
+import { Text, ThemeContext } from 'react-native-elements';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
 import { ProductListItem, Spinner } from '../../components';
 import { DIMENS, SPACING } from '../../constants';
@@ -19,6 +19,7 @@ const FeaturedProductList = ({
   categoryId,
 }: Props): React.ReactElement => {
   const { data, networkStatus, error } = useCategoryProducts({ categoryId });
+  const { theme } = useContext(ThemeContext);
   const navigation = useNavigation();
 
   const onProductItemClicked = (index: number) => {
@@ -57,14 +58,14 @@ const FeaturedProductList = ({
 
   if (networkStatus === NetworkStatus.loading) {
     return (
-      <View style={styles.loadingBox}>
+      <View style={styles.loadingBox(theme)}>
         <Spinner />
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container(theme)}>
       {name && (
         <Text h4 h4Style={styles.title}>
           {name}
@@ -81,25 +82,24 @@ const FeaturedProductList = ({
   );
 };
 
-// TODO: Extract hard coded values
 const styles = StyleSheet.create({
-  container: {
+  container: theme => ({
     marginBottom: SPACING.large,
-    backgroundColor: '#fff',
-  },
+    backgroundColor: theme.colors?.white,
+  }),
   title: {
     marginStart: SPACING.large,
     paddingVertical: SPACING.small,
-    fontSize: 16,
+    fontSize: DIMENS.featuredProductList.titleFontSize,
   },
-  loadingBox: {
+  loadingBox: theme => ({
     alignContent: 'center',
     justifyContent: 'center',
     width: '100%',
-    backgroundColor: '#fff',
+    backgroundColor: theme.colors?.white,
     marginBottom: SPACING.large,
     height: (DIMENS.common.WINDOW_WIDTH / 3) * 2, // This is linked to ProductListItem height
-  },
+  }),
 });
 
 export default FeaturedProductList;

src/screens/ProductDetailsScreen/ProductDetailsScreen.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { View, StyleSheet, Dimensions } from 'react-native';
-import { Text } from 'react-native-elements';
+import { Text, ThemeContext } from 'react-native-elements';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import HTML from 'react-native-render-html';
@@ -35,6 +35,7 @@ const ProductDetailsScreen = ({
   } = useProductDetails({
     sku,
   });
+  const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
     getProductDetails();
@@ -57,6 +58,7 @@ const ProductDetailsScreen = ({
             source={{ html: productDetails.description.html }}
             contentWidth={Dimensions.get('window').width}
             containerStyle={styles.description}
+            baseFontStyle={{ color: theme.colors?.black }}
           />
         )}
       </View>

src/screens/ProfileScreen/ProfileScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
-import { Button } from 'react-native-elements';
+import { Button, Text } from 'react-native-elements';
 import { GenericTemplate } from '../../components';
 import { translate } from '../../i18n';
 import { useCustomer, useLogout } from '../../logic';

src/screens/SearchScreen/SearchScreen.tsx

@@ -90,7 +90,6 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
         }}
         loadingProps={loadingProps}
         containerStyle={styles.searchBarContainer}
-        inputContainerStyle={styles.searchBarInputContainer}
       />
       <FlatList
         numColumns={2}
@@ -105,7 +104,6 @@ const SearchScreen = ({ navigation }: Props): React.ReactElement => {
   );
 };
 
-// TODO: Remove hard-coded values
 const styles = StyleSheet.create({
   center: {
     flex: 1,
@@ -114,7 +112,6 @@ const styles = StyleSheet.create({
     padding: SPACING.large,
   },
   searchBarContainer: {
-    padding: 0,
     borderTopWidth: 0,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: 'rgba(0,0,0,.1)',
@@ -129,10 +126,6 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     elevation: 1,
   },
-  searchBarInputContainer: {
-    borderRadius: 0,
-    backgroundColor: 'white',
-  },
   footerContainer: {
     alignItems: 'center',
     marginVertical: SPACING.small,

src/theme/colors.ts

@@ -0,0 +1,28 @@
+/**
+ * Note: Don't use the variables directly in code
+ * use colors from lightTheme and darkTheme
+ */
+
+interface Colors {
+  primary: string;
+  secondary: string;
+  background: string;
+}
+
+const WHITE = '#fff';
+const BLACK = '#000';
+const PRIMARY_COLOR = '#333333';
+const SECONDARY_COLOR = '#FF7900';
+const BACKGROUND_COLOR = '#fbfbfb';
+
+export const lightColors: Colors = {
+  primary: PRIMARY_COLOR,
+  secondary: SECONDARY_COLOR,
+  background: BACKGROUND_COLOR,
+};
+
+export const darkColors: Colors = {
+  primary: PRIMARY_COLOR,
+  secondary: SECONDARY_COLOR,
+  background: BLACK,
+};