Feature: Dark Mode Support #1

.prettierrc.js

@@ -17,7 +17,9 @@ module.exports = {
     '^navigation',
     '^navigation/(.*)$',
     '^network/(.*)$',
+    '^storage',
     '^storage/(.*)$',
+    '^themes/(.*)$',
     '^[./*]',
   ],
   importOrderSeparation: true,

App.tsx

@@ -1,17 +1,23 @@
 import 'localization';
 import React from 'react';
+import { StatusBar } from 'react-native';
 
-import { NavigationContainer } from '@react-navigation/native';
+import { NavigationContainer, useTheme } from '@react-navigation/native';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import NavigationStack from 'navigation';
 
+import { useThemeConfig } from 'themes/hooks';
+
 const client = new QueryClient();
 
 const App = () => {
+  const { theme } = useThemeConfig();
+  const { dark: isDarkMode } = useTheme();
   return (
     <QueryClientProvider client={client}>
-      <NavigationContainer>
+      <NavigationContainer theme={theme}>
+        <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
         <NavigationStack />
       </NavigationContainer>
     </QueryClientProvider>

src/@types/global.d.ts

@@ -0,0 +1,5 @@
+import type { CustomTheme } from 'themes/types';
+
+declare module '@react-navigation/native' {
+  export function useTheme(): CustomTheme;
+}

src/common/Button/styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-import { BLUE, GREY_01, GREY_02, WHITE } from 'constants/styles';
+import { BLUE, GREY_01, GREY_02, WHITE } from 'constants/colors';
 
 const styles = StyleSheet.create({
   container: {

src/features/auth/welcome/screen/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { SafeAreaView, StatusBar, useColorScheme } from 'react-native';
+import { SafeAreaView } from 'react-native';
 
 import Button from 'common/Button';
 
@@ -15,13 +15,11 @@ type WelcomeScreenProps = {
 } & WelcomeNavigationProps;
 
 const WelcomeScreen = ({ navigation: { navigate } }: WelcomeScreenProps) => {
-  const isDarkMode = useColorScheme() === 'dark';
   const onSignInPress = useCallback(() => navigate(AuthStackScreens.SignIn), [navigate]);
   const onSignUpPress = useCallback(() => navigate(AuthStackScreens.SignUp), [navigate]);
 
   return (
     <SafeAreaView style={styles.container}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <Button
         testID="dummy-button"
         accessibilityState={{ disabled: false }}

src/features/home/screen/index.tsx

@@ -1,13 +1,35 @@
 import React from 'react';
 import { SafeAreaView, Text } from 'react-native';
 
-import styles from './styles';
+import { useNavigation } from '@react-navigation/native';
+
+import Button from 'common/Button';
+
+import { translate } from 'localization/hooks';
+
+import { MainStackScreens } from 'navigation/stacks/main';
+
+import useStyles from './styles';
 import type { HomeNavigationProps } from './types';
 
-const HomeScreen: React.FunctionComponent<HomeNavigationProps> = () => (
-  <SafeAreaView style={styles.container}>
-    <Text accessibilityRole={'text'}>Home Screen</Text>
-  </SafeAreaView>
-);
+const HomeScreen: React.FunctionComponent<HomeNavigationProps> = () => {
+  const styles = useStyles();
+  const { navigate } = useNavigation();
+  const goToSettings = () => navigate(MainStackScreens.Settings);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text accessibilityRole="text" style={styles.title}>
+        {translate('screen.home.title')}
+      </Text>
+      <Button
+        accessibilityState={{ disabled: false }}
+        title="⚙️"
+        onPress={goToSettings}
+        style={styles.button}
+      />
+    </SafeAreaView>
+  );
+};
 
 export default HomeScreen;

src/features/home/screen/styles.ts

@@ -1,9 +1,34 @@
 import { StyleSheet } from 'react-native';
 
-export default StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+import { useTheme } from '@react-navigation/native';
+
+const useStyles = () => {
+  const { colors } = useTheme();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.background,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      color: colors.text,
+    },
+    button: {
+      position: 'absolute',
+      top: 20,
+      right: 20,
+      width: 40,
+      height: 40,
+      borderRadius: 30,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.action,
+    },
+  });
+};
+
+export default useStyles;

src/features/settings/screen/index.tsx

@@ -1,37 +1,64 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Switch, Text, View } from 'react-native';
 
 import Button from 'common/Button';
 
+import { BLUE, GREY_01, WHITE } from 'constants/colors';
+
 import { translate, useLanguage } from 'localization/hooks';
 import { Language } from 'localization/resources';
 
-import styles from './styles';
+import { useThemeConfig } from 'themes/hooks';
+
+import useStyles from './styles';
 
 const Settings = () => {
-  const { setLanguage } = useLanguage();
+  const { language, setLanguage } = useLanguage();
+  const { toggleTheme, isDarkMode } = useThemeConfig();
+  const styles = useStyles();
 
-  const onChangeLanguage = (languageCode: Language) => {
-    setLanguage(languageCode);
+  const onChangeLanguage = (lang: Language) => {
+    setLanguage(lang);
   };
+
   return (
     <View style={styles.container}>
-      <Text>{translate('screen.settings.updateLanguage')}</Text>
-      <Button
-        accessibilityState={{ disabled: false }}
-        title={'Spanish'}
-        onPress={() => onChangeLanguage('es')}
-      />
-      <Button
-        accessibilityState={{ disabled: false }}
-        title={'English'}
-        onPress={() => onChangeLanguage('en')}
-      />
-      <Button
-        accessibilityState={{ disabled: false }}
-        title={'Arabic'}
-        onPress={() => onChangeLanguage('ar')}
-      />
+      <View style={styles.option}>
+        <Text style={styles.optionTitle}>{translate('screen.settings.themes')}</Text>
+
+        <View style={styles.row}>
+          <Text style={styles.switchText}>{translate('screen.settings.darkMode')}</Text>
+          <Switch
+            accessibilityState={{ disabled: false }}
+            trackColor={{ false: GREY_01, true: BLUE }}
+            thumbColor={WHITE}
+            ios_backgroundColor={WHITE}
+            onValueChange={toggleTheme}
+            value={isDarkMode}
+          />
+        </View>
+      </View>
+      <View style={styles.option}>
+        <Text style={styles.optionTitle}>{translate('screen.settings.changeLanguage')}</Text>
+        <Button
+          title="Spanish"
+          disabled={language === 'es'}
+          onPress={() => onChangeLanguage('es')}
+          style={[styles.button, language === 'es' && styles.disabledButton]}
+        />
+        <Button
+          title="English"
+          disabled={language === 'en'}
+          onPress={() => onChangeLanguage('en')}
+          style={styles.button}
+        />
+        <Button
+          title="Arabic"
+          disabled={language === 'ar'}
+          onPress={() => onChangeLanguage('ar')}
+          style={styles.button}
+        />
+      </View>
     </View>
   );
 };

src/features/settings/screen/styles.ts

@@ -1,9 +1,61 @@
 import { StyleSheet } from 'react-native';
 
-export default StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+import { useTheme } from '@react-navigation/native';
+
+const useStyles = () => {
+  const { colors } = useTheme();
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      backgroundColor: colors.background,
+    },
+    optionTitle: {
+      fontWeight: 'bold',
+      fontSize: 18,
+      marginBottom: 10,
+      color: colors.text,
+      alignSelf: 'flex-start',
+    },
+    option: {
+      width: '100%',
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+    },
+    button: {
+      width: '100%',
+      height: 60,
+      borderRadius: 10,
+      justifyContent: 'center',
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      backgroundColor: colors.primary,
+      marginBottom: 20,
+    },
+    disabledButton: {
+      backgroundColor: colors.disabled,
+    },
+    buttonText: {
+      fontWeight: 'bold',
+      color: colors.text,
+    },
+    row: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      paddingVertical: 10,
+    },
+    switchText: {
+      fontSize: 16,
+      color: colors.text,
+    },
+    label: {
+      fontSize: 12,
+      color: colors.text,
+    },
+  });
+};
+
+export default useStyles;

src/localization/hooks.ts

@@ -1,10 +1,11 @@
 import i18n from 'i18next';
 import { I18nManager } from 'react-native';
 import Restart from 'react-native-restart';
-import Stores from 'storage';
 
 import { RecursiveKeyOf } from 'constants/types';
 
+import Stores from 'storage';
+
 import { Language, resources } from './resources';
 
 type DefaultLocale = typeof resources.en.translation;

src/localization/index.ts

@@ -1,6 +1,7 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { I18nManager } from 'react-native';
+
 import Storage from 'storage';
 
 import { resources } from './resources';

src/localization/resources/ar.json

@@ -8,7 +8,9 @@
     },
     "settings": {
       "title": "إعدادات",
-      "updateLanguage": "تحديث اللغة"
+      "changeLanguage": "تحديث اللغة",
+      "darkMode": "الوضع الداكن",
+      "themes": "الموضوعات"
     }
   }
 }

src/localization/resources/en.json

@@ -8,7 +8,12 @@
     },
     "settings": {
       "title": "Settings",
-      "updateLanguage": "Update Language"
+      "changeLanguage": "Change Language",
+      "darkMode": "Dark Mode",
+      "themes": "Themes"
+    },
+    "home": {
+      "title": "Home Screen"
     }
   }
 }

src/localization/resources/es.json

@@ -8,7 +8,9 @@
     },
     "settings": {
       "title": "Configuración",
-      "updateLanguage": "Cambiar idioma"
+      "changeLanguage": "Cambiar idioma",
+      "darkMode": "Modo oscuro",
+      "themes": "Temas"
     }
   }
 }

src/navigation/stacks/main/index.tsx

@@ -22,12 +22,12 @@ const Stack = createNativeStackNavigator<MainStackParamList>();
 const MainStack = () => {
   return (
     <Stack.Navigator>
+      <Stack.Screen name={MainStackScreens.Home} component={HomeScreen} />
       <Stack.Screen
         name={MainStackScreens.Settings}
         component={SettingScreen}
         options={{ title: translate('screen.settings.title') }}
       />
-      <Stack.Screen name={MainStackScreens.Home} component={HomeScreen} />
     </Stack.Navigator>
   );
 };

src/storage/hooks.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+
 import { StorageInstance } from 'storage';
 
 type StoredValueHookParams<TKeys extends string> = {

src/storage/index.ts

@@ -4,6 +4,7 @@ const GlobalStoreKeys = {
   user: 'user',
   other: 'other',
   language: 'language',
+  theme: 'theme',
 } as const;
 
 export type GlobalStoreKeys = keyof typeof GlobalStoreKeys;