diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index ffd07d945b..134ae11f10 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,5 +1,6 @@ import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Text} from 'view/com/util/text/Text' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' import {s, colors} from 'lib/styles' @@ -9,6 +10,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 +29,22 @@ export const SplashScreen = ({ const pal = usePalette('default') const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const insets = useSafeAreaInsets() + + 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 +83,51 @@ 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 +143,7 @@ const styles = StyleSheet.create({ alignItems: 'center', }, btns: { - paddingBottom: 40, + paddingBottom: 0, }, title: { textAlign: 'center', @@ -95,4 +165,11 @@ const styles = StyleSheet.create({ textAlign: 'center', fontSize: 21, }, + footer: { + paddingHorizontal: 16, + paddingTop: 12, + paddingBottom: 24, + 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: {}, }) }