import React, { useState, useEffect, useContext } from 'react'; import { FlatList, StyleSheet } from 'react-native'; import { SafeBlueArea, BlueListItem, BlueLoading, BlueNavigationStyle } from '../../BlueComponents'; import { AvailableLanguages } from '../../loc/languages'; import loc from '../../loc'; import { BlueStorageContext } from '../../blue_modules/storage-context'; import { useNavigation, useTheme } from '@react-navigation/native'; const styles = StyleSheet.create({ flex: { flex: 1, }, }); const Language = () => { const { setLanguage, language } = useContext(BlueStorageContext); const [isLoading, setIsLoading] = useState(true); const [selectedLanguage, setSelectedLanguage] = useState(loc.getLanguage()); const { setOptions } = useNavigation(); const { colors } = useTheme(); const stylesHook = StyleSheet.create({ flex: { backgroundColor: colors.background, }, }); useEffect(() => { setIsLoading(false); }, []); useEffect(() => { setOptions({ headerTitle: loc.settings.language }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [language]); const renderItem = item => { return ( { await loc.saveLanguage(item.item.value); setSelectedLanguage(item.item.value); setLanguage(); }} title={item.item.label} checkmark={selectedLanguage === item.item.value} /> ); }; return isLoading ? ( ) : ( `${index}`} data={AvailableLanguages} renderItem={renderItem} initialNumToRender={25} /> ); }; Language.navigationOptions = () => ({ ...BlueNavigationStyle(), headerTitle: loc.settings.language, }); export default Language;