Feature: Dark Mode Support #1 #243
Conversation
juanchoperezj
changed the title
src/features/home/screen/index.tsx
Outdated
|
|
||
| return ( | ||
| <SafeAreaView style={styles.container}> | ||
| <Text accessibilityRole={'text'} style={styles.title}> |
There was a problem hiding this comment.
| <Text accessibilityRole={'text'} style={styles.title}> | |
| <Text accessibilityRole="text" style={styles.title}> |
src/features/home/screen/index.tsx
Outdated
| </Text> | ||
| <Button | ||
| accessibilityState={{ disabled: false }} | ||
| title={'⚙️'} |
There was a problem hiding this comment.
| title={'⚙️'} | |
| title="⚙️" |
There was a problem hiding this comment.
Maybe another improvement would be create a useStyles or useThemedStyles hook that we could use to generate styles for any component just to avoid creating a function called useStyles that uses the useTheme to get access to the theme but WDYT?? @juanchoperezj
Nice work here!! 🚀
| thumbColor={WHITE} | ||
| ios_backgroundColor={WHITE} | ||
| onValueChange={toggleTheme} | ||
| value={currentTheme === ColorScheme.dark} |
There was a problem hiding this comment.
WDYT if we could add isDarkMode to the useThemeConfig just to get that constant in all places 🤔
| value={currentTheme === ColorScheme.dark} | |
| value={isDarkMode} |
juanchoperezj
dismissed stale reviews from ManuelJrez and jpirazusta
The base branch was changed.
I'll add this hook from the branch #244 but in a new one to narrow the number of files changed. |
juanchoperezj
dismissed stale reviews from ManuelJrez and jpirazusta
via
be240cf
src/features/home/screen/index.tsx
Outdated
| return ( | ||
| <SafeAreaView style={styles.container}> | ||
| <Text accessibilityRole="text" style={styles.title}> | ||
| Home Screen |
There was a problem hiding this comment.
This string could be moved to the locale :)
| <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.
Why not making use of the button component?
There was a problem hiding this comment.
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.
| <View style={styles.option}> | ||
| <Text style={styles.optionTitle}>{translate('screen.settings.changeLanguage')}</Text> | ||
| <Button | ||
| title="Spanish" |
There was a problem hiding this comment.
There is no need to add language texts to the locale files, those could be handled differently according to the project's needs.
juanchoperezj
requested review from
Stukz,
ManuelJrez and
asdolo
and removed request for
ManuelJrez
Pull request type
Description
Introducing Dark Mode Support using React Navigation Theme.
Note: This PR was started from the branch
feature/i18nto take advantage of the Settings screen.Jira board reference
Notes:
Tasks:
Preview
UI Changes will be on the second part of this feature.