languageList.js

import React from 'react';
import {
  FlatList,
  InteractionManager,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import {currentLocale, translate} from '../localization';
import {translationFileMappings} from '../localization/translationFileMappings';
import modalService from '../modal/modalService';
import colors from './colors';
import {H2, Paragraph} from './fonts';

const ITEM_HEIGHT = 70;

class LanguageItem extends React.PureComponent {
  onNewLanguagePick = () => {
    this.props.item && this.props.setLanguage(this.props.item);
  };

  render() {
    const item = this.props.item;
    const isActive = this.props.isActive;

    return (
      <TouchableOpacity
        onPress={this.onNewLanguagePick}
        style={[styles.containerWrapper]}>
        <Animatable.View
          style={styles.rowWrapper}
          animation={'fadeIn'}
          useNativeDriver={true}>
          <View style={styles.rowNameWrapper}>
            <Paragraph
			  // 💖 translate() will return text in current locale
              text={item.toUpperCase() + ' - ' + translate(item) }
              style={{
                color: isActive === true ? colors.BLUE : colors.GREY,
                textTransform: 'capitalize',
              }}
            />
          </View>
        </Animatable.View>
      </TouchableOpacity>
    );
  }
}


export const LanguagesList = props => {
  const langs = Object.keys(translationFileMappings);


// 💖 in store (or in side efffects), I just persist locale using
// 💖 function from persist.js - storeLocale() AND I update moment
// 💖 library with function from dateUtils - setMomentLocale()
// 💖 you would also set RTL language support there by calling 
// 💖 I18nManager.forceRTL(true); - I18nManager could be imported 
// 💖 directly from react-native

const setLanguage = useStoreActions(state => state.settings.setLanguage);


  const currentLanguage = currentLocale();
  console.log(currentLanguage);

  const onNewLanguagePick = async language => {
    modalService.close();
    setTimeout(() => {
      InteractionManager.runAfterInteractions(async () => {
        await setLanguage({language: language});
      });
    }, 200);
  };

  return (
    <View style={{flex: 1}}>
      <H2
        text={translate('LANGUAGE')}
        style={{marginHorizontal: 20, marginBottom: 5, marginTop: 20}}
      />
      <FlatList
        style={{flex: 1}}
        contentContainerStyle={styles.keylistContainer}
        removeClippedSubview={true}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        data={langs}
        getItemLayout={(data, index) => ({
          length: ITEM_HEIGHT,
          offset: ITEM_HEIGHT * index,
          index,
        })}
        renderItem={({item, index}) => (
          <LanguageItem
            item={item}
            isActive={item === currentLanguage}
            setLanguage={onNewLanguagePick}
          />
        )}
        keyExtractor={(item, index) => item}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  keylistHeader: {
    marginTop: 0,
    paddingHorizontal: 5,
    alignSelf: 'flex-start',
    marginBottom: 10,
  },
  keylistContainer: {
    paddingTop: 30,
    // flexGrow: 1,
    justifyContent: 'flex-start',
    // flex: 1,
    paddingHorizontal: 20,
  },
  keyListScreenWrapper: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    paddingTop: 0,
    paddingHorizontal: 0,
  },
  rowWrapper: {
    marginVertical: 15,
  },
  containerWrapper: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',

    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.15,
    shadowRadius: 10,
    elevation: 5,
    backgroundColor: 'white',
    borderRadius: 10,
    paddingHorizontal: 20,
    paddingVertical: 10,
    marginVertical: 8,
    marginHorizontal: 0,

    height: ITEM_HEIGHT,

    // flex: 1,
  },
});