diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index ffd07d945b..4fd800c3b7 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -9,6 +9,14 @@ import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onPressSignin, @@ -20,6 +28,21 @@ export const SplashScreen = ({ const pal = usePalette('default') const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (value: Parameters[0]) => { + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) + return ( @@ -58,6 +81,50 @@ export const SplashScreen = ({ + + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + useNativeAndroidPickerStyle={false} + style={{ + inputAndroid: { + color: pal.textLight.color, + fontSize: 16, + paddingRight: 10 + 4, + }, + inputIOS: { + color: pal.text.color, + fontSize: 16, + paddingRight: 10 + 4, + }, + }} + /> + + + + + + ) @@ -73,7 +140,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, btns: { - paddingBottom: 40, + paddingBottom: 0, }, title: { textAlign: 'center', @@ -95,4 +162,10 @@ const styles = StyleSheet.create({ textAlign: 'center', fontSize: 21, }, + footer: { + paddingHorizontal: 16, + paddingVertical: 12, + justifyContent: 'center', + alignItems: 'center', + }, }) diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 8ef64099f0..f1921c7ffb 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -9,9 +9,13 @@ import {usePalette} from 'lib/hooks/usePalette' import {CenteredView} from '../util/Views' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import {useLingui} from '@lingui/react' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onDismiss, @@ -98,24 +102,84 @@ export const SplashScreen = ({ function Footer({styles}: {styles: ReturnType}) { const pal = usePalette('default') + const {_} = useLingui() + + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + + const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage) + + const onChangeAppLanguage = React.useCallback( + (ev: React.ChangeEvent) => { + const value = ev.target.value + + if (!value) return + if (sanitizedLang !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [sanitizedLang, setLangPrefs], + ) return ( + + + + + + {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name} + + + + + ) } @@ -188,9 +252,10 @@ const useStyles = () => { padding: 20, borderTopWidth: 1, flexDirection: 'row', + flexWrap: 'wrap', + gap: 20, }, - footerLink: { - marginRight: 20, - }, + footerDivider: {flexGrow: 1}, + footerLink: {}, }) }