Untitled

import React, { useState } from 'react';
import { FlatList, Modal, TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import { Link, useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
import {languagesList  , Language} from '../src/api/languagesList'
import i18next, { languageResources } from '../src/api/i18next';
import { useFonts } from 'expo-font';
import AppLoading from 'expo-app-loading';


function App(): React.ReactElement {

  let [fontsLoaded, fontError] = useFonts({
    'IBMPlexSansRegular': require('../assets/fonts/IBMPlexSansArabic-Regular.ttf'),
    'IBMPlexSansBold': require('../assets/fonts/IBMPlexSansArabic-Bold.ttf'),
  });
  
  if (!fontsLoaded && !fontError) {
    return <AppLoading/>;
  }

  
  const [visible, setVisible] = useState(false);
  const {t} = useTranslation();

  const changeLng = (lng:any) => {
    i18next.changeLanguage(lng);
    setVisible(false);
  };
  return (
    <View>
      <Modal visible={visible} onRequestClose={() => setVisible(false)}>
        <View style={styles.languagesList}>
          <FlatList
            data={Object.keys(languageResources)}
            renderItem={({item}) => (
              <TouchableOpacity
                style={styles.languageButton}
                onPress={() => changeLng(item)}>
                <Text style={styles.lngName}>
                  {languagesList[item].nativeName}
                </Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </Modal>
      <View>
        <View style={{marginTop: 8}} />
        <Link
        href={{
          pathname: "/clients",
          params: { id: 'bacon' }
        }}>
          {t('vuser')}
        </Link>
        <Link
        href={{
          pathname: "/lawyers",
          params: { id: 'bacon' }
        }}>
          {t('vlawyer')}
        </Link>
        <TouchableOpacity style={styles.button} onPress={() => setVisible(true)}>
        <Text style={styles.buttonText}>{t('change-language')}</Text>
      </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#191266',
  },
  button: {
    backgroundColor: '#6258e8',
    padding: 10,
    borderRadius: 3,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
  text: {
    marginBottom: 100,
    fontSize: 18,
    color: 'white',
  },
  languagesList: {
    flex: 1,
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#6258e8',
  },

  languageButton: {
    padding: 10,
    borderBottomColor: '#dddddd',
    borderBottomWidth: 1,
  },
  lngName: {
    fontSize: 16,
    color: 'white',
  },
});

const isStorybookEnabled = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true";

const appEntryPoint =  isStorybookEnabled ? require("../.storybook").default : App;

export default appEntryPoint;