Logics.js

import React, { Component } from 'react';
import LocalizaionView from './LocalixationView';
// import { ToastA/ndroid } from 'react-native';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    FlatList,
    Slider,
    TextInput,
    Keyboard,
    ToastAndroid
} from "react-native";
import SpeechAndroid from 'react-native-kie-android-voice';
import Tts from 'react-native-tts';
import I18n from "i18n-js";
import styles from './Localizationstyles';
import * as RNLocalize from "react-native-localize";
import ar from '../../android/app/src/main/assets/translations/ar.json';
import en from "../../android/app/src/main/assets/translations/en.json";
import fr from "../../android/app/src/main/assets/translations/fr.json";
import hi from "../../android/app/src/main/assets/translations/hi.json";
import it from "../../android/app/src/main/assets/translations/it.json";
import nl from "../../android/app/src/main/assets/translations/nl.json";
import ja from "../../android/app/src/main/assets/translations/ja.json";
import es from "../../android/app/src/main/assets/translations/es.json";
import ru from "../../android/app/src/main/assets/translations/ru.json";


const locales = RNLocalize.getLocales();
if (Array.isArray(locales)) {
    I18n.locale = locales[0].languageTag;
}

I18n.fallbacks = true;
I18n.translations = {
    en,
    fr,
    ar,
    hi,
    it,
    nl,
    ja,
    es,
    ru
};
const desc = 'We at enappd  deliver high quality app templates, themes and add-ons for you to jump start your startup, or take your business to the next level with an awesome app. We also offer multi-speciality teams for custom development projects ranging from Full stack development to virtual reality platforms.'
class LocalixationContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            languageFrom: "",
            languageTo: "",
            languageCode: 'en',
            inputText: "",
            outputText: "",
            voices: [],
            ttsStatus: "initiliazing",
            selectedVoice: null,
            speechRate: 0.50,
            speechPitch: 1.02,
            text: desc,
            convertSentence: false,
            micOn: false,
            readTextInVoice: true,
        };
        Tts.addEventListener("tts-start", event =>
            this.setState({ ttsStatus: "started" })
        );
        Tts.addEventListener("tts-finish", event =>
            this.setState({ ttsStatus: "finished" })
        );
        Tts.addEventListener("tts-cancel", event =>
            this.setState({ ttsStatus: "cancelled" })
        );
        Tts.setDefaultRate(this.state.speechRate);
        Tts.setDefaultPitch(this.state.speechPitch);
        Tts.getInitStatus().then(this.initTts);
    }

    changeLanguage = (lang) => {
        console.log(lang);
        this.setState({ languageTo: lang, languageCode: lang, convertSentence: true });
    }



    initTts = async () => {
        const voices = await Tts.voices();
        const availableVoices = voices
            .filter(v => !v.networkConnectionRequired && !v.notInstalled)
            .map(v => {
                return { id: v.id, name: v.name, language: v.language };
            });
        let selectedVoice = null;
        if (voices && voices.length > 0) {
            selectedVoice = voices[4].id;
            try {
                await Tts.setDefaultLanguage(voices[0].language);
            } catch (err) {
                // My Samsung S9 has always this error: "Language is not supported"
                console.log(`setDefaultLanguage error `, err);
            }
            await Tts.setDefaultVoice(voices[0].id);
            this.setState({
                voices: availableVoices,
                selectedVoice,
                ttsStatus: "initialized"
            });
        } else {
            this.setState({ ttsStatus: "initialized" });
        }
    };

    readText = async () => {
        Tts.stop();
        Tts.speak(this.state.text);
    };

    setSpeechRate = async rate => {
        await Tts.setDefaultRate(rate);
        this.setState({ speechRate: rate });
    };

    setSpeechPitch = async rate => {
        await Tts.setDefaultPitch(rate);
        this.setState({ speechPitch: rate });
    };

    onVoicePress = async voice => {
        try {
            await Tts.setDefaultLanguage(voice.language);
        } catch (err) {
            // My Samsung S9 has always this error: "Language is not supported"
            console.log(`setDefaultLanguage error `, err);
        }
        await Tts.setDefaultVoice(voice.id);
        this.setState({ selectedVoice: voice.id });
    };

    renderVoiceItem = ({ item }) => {
        return (
            <Button
                title={`${item.language} - ${item.name || item.id}`}
                color={this.state.selectedVoice === item.id ? undefined : "#969696"}
                onPress={() => this.onVoicePress(item)}
            />
        );
    };


    handleTextReader = () => {
        this.setState({
            readTextInVoice: !this.state.readTextInVoice
        })
    }

    SpeechText = (value) => {
        this.setState({
            text: value
        })
    }

    render() {
        const { languageTo, convertSentence, micOn, readTextInVoice, voices, ttsStatus, selectedVoice, speechRate, speechPitch, text } = this.state
        return (
            <LocalizaionView
                languageTo={languageTo}
                changeLanguage={(lang) => this.changeLanguage(lang)}
                convertSentence={convertSentence}
                micOn={micOn}
                // _buttonClick={this._buttonClick}
                readTextInVoice={readTextInVoice}
                ttsStatus={ttsStatus}
                speechRate={speechRate}
                selectedVoice={selectedVoice}
                speechPitch={speechPitch}
                text={text}
                handleTextReader={this.handleTextReader}
                setSpeechRate={this.setSpeechRate}
                setSpeechPitch={this.setSpeechPitch}
                readText={this.readText}
                renderVoiceItem={this.renderVoiceItem}
                voices={voices}
                SpeechText={this.SpeechText}
            />


        );
    }
}

export default LocalixationContainer;