-
Notifications
You must be signed in to change notification settings - Fork 15
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
Changes from 3 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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; | ||
} |
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 | ||
</Text> | ||
<Button | ||
accessibilityState={{ disabled: false }} | ||
title="⚙️" | ||
onPress={goToSettings} | ||
style={styles.button} | ||
/> | ||
</SafeAreaView> | ||
); | ||
}; | ||
|
||
export default HomeScreen; |
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; |
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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why not making use of the button component? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
); | ||
}; | ||
|
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; |
There was a problem hiding this comment.
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 :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done!