Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Dark Mode Support #1 #243

Merged
merged 5 commits into from
Feb 2, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ module.exports = {
'^navigation',
'^navigation/(.*)$',
'^network/(.*)$',
'^storage',
'^storage/(.*)$',
'^themes/(.*)$',
'^[./*]',
],
importOrderSeparation: true,
Expand Down
10 changes: 8 additions & 2 deletions App.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
5 changes: 5 additions & 0 deletions src/@types/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import type { CustomTheme } from 'themes/types';

declare module '@react-navigation/native' {
export function useTheme(): CustomTheme;
}
2 changes: 1 addition & 1 deletion src/common/Button/styles.ts
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down
File renamed without changes.
4 changes: 1 addition & 3 deletions src/features/auth/welcome/screen/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 }}
Expand Down
32 changes: 26 additions & 6 deletions src/features/home/screen/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
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 { 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}>
Home Screen
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This string could be moved to the locale :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

</Text>
<Button
accessibilityState={{ disabled: false }}
title="⚙️"
onPress={goToSettings}
style={styles.button}
/>
</SafeAreaView>
);
};

export default HomeScreen;
39 changes: 32 additions & 7 deletions src/features/home/screen/styles.ts
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 46 additions & 22 deletions src/features/settings/screen/index.tsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,61 @@
import React from 'react';
import { Text, View } from 'react-native';
import { Switch, Text, TouchableOpacity, View } from 'react-native';
import { useThemeConfig } from 'themes/hooks';

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 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>
<TouchableOpacity
disabled={language === 'es'}
onPress={() => onChangeLanguage('es')}
style={[styles.button, language === 'es' && styles.disabledButton]}>
<Text style={styles.buttonText}>Spanish</Text>
</TouchableOpacity>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not making use of the button component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed! I was using the following because of the styles, I didn't want to add other props to the button component because is not related to the PR changes.

<TouchableOpacity
disabled={language === 'en'}
onPress={() => onChangeLanguage('en')}
style={styles.button}>
<Text style={styles.buttonText}>English</Text>
</TouchableOpacity>
<TouchableOpacity
disabled={language === 'ar'}
onPress={() => onChangeLanguage('ar')}
style={styles.button}>
<Text style={styles.buttonText}>Arabic</Text>
</TouchableOpacity>
</View>
</View>
);
};
Expand Down
66 changes: 59 additions & 7 deletions src/features/settings/screen/styles.ts
Original file line number Diff line number Diff line change
@@ -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;
3 changes: 2 additions & 1 deletion src/localization/hooks.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/localization/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
4 changes: 3 additions & 1 deletion src/localization/resources/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
},
"settings": {
"title": "إعدادات",
"updateLanguage": "تحديث اللغة"
"changeLanguage": "تحديث اللغة",
"darkMode": "الوضع الداكن",
"themes": "الموضوعات"
}
}
}
4 changes: 3 additions & 1 deletion src/localization/resources/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
},
"settings": {
"title": "Settings",
"updateLanguage": "Update Language"
"changeLanguage": "Change Language",
"darkMode": "Dark Mode",
"themes": "Themes"
}
}
}
4 changes: 3 additions & 1 deletion src/localization/resources/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
},
"settings": {
"title": "Configuración",
"updateLanguage": "Cambiar idioma"
"changeLanguage": "Cambiar idioma",
"darkMode": "Modo oscuro",
"themes": "Temas"
}
}
}
2 changes: 1 addition & 1 deletion src/navigation/stacks/main/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/storage/hooks.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useCallback, useMemo } from 'react';

import { StorageInstance } from 'storage';

type StoredValueHookParams<TKeys extends string> = {
Expand Down
1 change: 1 addition & 0 deletions src/storage/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const GlobalStoreKeys = {
user: 'user',
other: 'other',
language: 'language',
theme: 'theme',
} as const;

export type GlobalStoreKeys = keyof typeof GlobalStoreKeys;
Expand Down
4 changes: 2 additions & 2 deletions src/storage/stores.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import StoreInstances, { GlobalStoreKeys, StorageInstance } from 'storage';

import { User } from 'network/modules/user/models';

import StoreInstances, { GlobalStoreKeys, StorageInstance } from 'storage';

import { useStoredValue, useStoredValueListener } from './hooks';

/// Stores
Expand Down
Loading