import React, { useState, useContext } from 'react' import { View, Text, StyleSheet } from 'react-native' import { useNavigation } from '@react-navigation/native' import { Picker } from '@react-native-picker/picker' import { useTranslation } from 'react-i18next' import AsyncStorage from '@react-native-async-storage/async-storage' // Component import Button from '../components/Button' import Switch from '../components/Switch' import { ThemeContext } from '../Theme' /** * About App screen **/ const About = () => { const { t, i18n } = useTranslation() const navigation = useNavigation() const { dark, theme, toggle } = useContext(ThemeContext) const [appLanguage, setAppLanguage] = useState(i18n.language) const language = [ { lang: 'en', label: 'English 🇬🇧' }, { lang: 'ge', label: 'ქართული 🇬🇪' } ] const changeLangHandler = async languageSelected => { setAppLanguage(languageSelected) await i18n.changeLanguage(languageSelected) await AsyncStorage.setItem('i18NextBusTimetable', languageSelected) } // Opens Feedback screen const feedbackHandler = () => navigation.navigate('Feedback') return ( <View style={styles.container}> <Text style={[styles.info, { color: theme.text }]}> {t('about.info')} </Text> <Picker selectedValue={appLanguage} onValueChange={changeLangHandler} style={styles.picker} > {language.map(({ lang, label }, i) => { return ( <Picker.Item key={i} value={lang} label={label} color={theme.text} /> ) })} </Picker> <View style={styles.wrap}> <Button onPress={feedbackHandler} text={t('about.feedbackButton')} buttonColor={theme.buttonColor} textColor={theme.buttonText} margin={30} paddingVertical={2} fontSize={14} /> <Switch isOn={dark} onToggle={toggle} /> </View> <Text style={{ color: theme.text }}> {t('about.madeBy')} {new Date().getFullYear()} </Text> </View> ) } export default About const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'space-between', padding: 20 }, info: { top: 10, lineHeight: 20 }, picker: { paddingVertical: 20, height: 200, width: 200 }, wrap: { bottom: 25, alignItems: 'center' } })