Build a Language Translator App Using React Native

In this article, we’ll walk you through the process of creating a language translation app that allows users to translate text between different languages. The implementation involves utilizing Re­act Native components and integrating an efficient language translation API, ensuring the app’s functionality is realized effectively.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

• Introduction to React Native
• React Native Components
• React Hooks
• Node.js and NPM

Approach:

• Users can utilize­ this app to input text for translation and choose the source­ and target languages. The app e­mploys the useState hook to manage­ its state, which includes the inputte­d text, translated text, and se­lected languages.
• The translate­ function handles the processing of translations. Whe­n the input is empty, it effe­ctively erases the­ translated text. On the othe­r hand, if there is input provided, it re­trieves translations using an API.
• The function calle­d exchangeLanguages pe­rforms the task of swapping the input and translated te­xt, while also updating the sele­cted languages.
• The use­r interface comprises of two Input compone­nts that allow for text input and translation display. The sele­ction of the source and target language­ is facilitated through ModalDropdown. To initiate the translation proce­ss, there is a dedicate­d translate button.

Steps to Create React Native Application:

Step 1: Create a React Native Application

npx create-expo-app LanguageTranslatorApp

Step 2: ​Change the directory to the project folder

cd LanguageTranslatorApp

Step 3: Install Dependencies

npm install react-native-modal-dropdown react-native-elements

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-modal-dropdown": "*",
    "react-native-elements": "*"
}

Example: Below is the implementation of the above approach

Javascript

import React, { useState } from 'react';
import { View,
         Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Input } from 'react-native-elements';
import ModalDropdown from 'react-native-modal-dropdown';
import { styles } from "./Style";

const languages = {
    "am-ET": "Amharic",
    "ar-SA": "Arabic",
    "be-BY": "Bielarus",
    "bem-ZM": "Bemba",
    "bi-VU": "Bislama",
    "bjs-BB": "Bajan",
    "bn-IN": "Bengali",
    "bo-CN": "Tibetan",
    "br-FR": "Breton",
    "bs-BA": "Bosnian",
    "ca-ES": "Catalan",
    "cop-EG": "Coptic",
    "cs-CZ": "Czech",
    "cy-GB": "Welsh",
    "da-DK": "Danish",
    "dz-BT": "Dzongkha",
    "de-DE": "German",
    "dv-MV": "Maldivian",
    "el-GR": "Greek",
    "en-GB": "English",
    "es-ES": "Spanish",
    "et-EE": "Estonian",
    "eu-ES": "Basque",
    "fa-IR": "Persian",
    "fi-FI": "Finnish",
    "fn-FNG": "Fanagalo",
    "fo-FO": "Faroese",
    "fr-FR": "French",
    "gl-ES": "Galician",
    "gu-IN": "Gujarati",
    "ha-NE": "Hausa",
    "he-IL": "Hebrew",
    "hi-IN": "Hindi",
    "hr-HR": "Croatian",
    "hu-HU": "Hungarian",
    "id-ID": "Indonesian",
    "is-IS": "Icelandic",
    "it-IT": "Italian",
    "ja-JP": "Japanese",
    "kk-KZ": "Kazakh",
    "km-KM": "Khmer",
    "kn-IN": "Kannada",
    "ko-KR": "Korean",
    "ku-TR": "Kurdish",
    "ky-KG": "Kyrgyz",
    "la-VA": "Latin",
    "lo-LA": "Lao",
    "lv-LV": "Latvian",
    "men-SL": "Mende",
    "mg-MG": "Malagasy",
    "mi-NZ": "Maori",
    "ms-MY": "Malay",
    "mt-MT": "Maltese",
    "my-MM": "Burmese",
    "ne-NP": "Nepali",
    "niu-NU": "Niuean",
    "nl-NL": "Dutch",
    "no-NO": "Norwegian",
    "ny-MW": "Nyanja",
    "ur-PK": "Pakistani",
    "pau-PW": "Palauan",
    "pa-IN": "Panjabi",
    "ps-PK": "Pashto",
    "pis-SB": "Pijin",
    "pl-PL": "Polish",
    "pt-PT": "Portuguese",
    "rn-BI": "Kirundi",
    "ro-RO": "Romanian",
    "ru-RU": "Russian",
    "sg-CF": "Sango",
    "si-LK": "Sinhala",
    "sk-SK": "Slovak",
    "sm-WS": "Samoan",
    "sn-ZW": "Shona",
    "so-SO": "Somali",
    "sq-AL": "Albanian",
    "sr-RS": "Serbian",
    "sv-SE": "Swedish",
    "sw-SZ": "Swahili",
    "ta-LK": "Tamil",
    "te-IN": "Telugu",
    "tet-TL": "Tetum",
    "tg-TJ": "Tajik",
    "th-TH": "Thai",
    "ti-TI": "Tigrinya",
    "tk-TM": "Turkmen",
    "tl-PH": "Tagalog",
    "tn-BW": "Tswana",
    "to-TO": "Tongan",
    "tr-TR": "Turkish",
    "uk-UA": "Ukrainian",
    "uz-UZ": "Uzbek",
    "vi-VN": "Vietnamese",
    "wo-SN": "Wolof",
    "xh-ZA": "Xhosa",
    "yi-YD": "Yiddish",
    "zu-ZA": "Zulu"
};

export default function LanguageTranslator() {
    const [fromText, setFromText] = useState('');
    const [toText, setToText] = useState('');
    const [fromLanguage, setFromLanguage] =
        useState('en-GB');
    const [toLanguage, setToLanguage] =
        useState('fa-IR');

    const translate = () => {
        if (!fromText) {
            setToText('');
            return;
        }

        setToText('Translating...');

        const apiUrl =
`https://api.mymemory.translated.net/get?q=
    ${fromText}&langpair=${fromLanguage}|${toLanguage}`;

        fetch(apiUrl)
            .then((res) => res.json())
            .then((data) => {
                setToText(data.responseData.translatedText);
                data.matches.forEach((data) => {
                    if (data.id === 0) {
                        setToText(data.translation);
                    }
                });
            });
    };

    const exchangeLanguages = () => {
        const tempText = fromText;
        const tempLang = fromLanguage;

        setFromText(toText);
        setToText(tempText);
        setFromLanguage(toLanguage);
        setToLanguage(tempLang);
    };

    return (
        <View style={styles.container}>
            <View style={styles.wrapper}>
                <Input
                    placeholder="Enter text"
                    value={fromText}
                    onChangeText={(text) =>
                        setFromText(text)}
                    inputContainerStyle=
                        {styles.textInputContainer}
                    multiline={true}
                    // Allow multiline input
                    numberOfLines={4}
                    // Limit the number of lines shown (adjust as needed)
                />
                <View style={styles.controls}>
                    <ModalDropdown
                        options={Object.values(languages)}
                        defaultValue={languages[fromLanguage]}
                        onSelect={(index, value) => {
                            setFromLanguage(Object.keys(languages).find(key =>
                                languages[key] === value));
                        }}
                        style={styles.picker}
                    />
                    <TouchableOpacity style={styles.exchangeButton}
                        onPress={exchangeLanguages}>
                        <Text style={styles.exchangeButtonText}>↔</Text>
                    </TouchableOpacity>
                    <ModalDropdown
                        options={Object.values(languages)}
                        defaultValue={languages[toLanguage]}
                        onSelect={(index, value) => {
                            setToLanguage(Object.keys(languages)
                                .find(key => languages[key] === value));
                        }}
                        style={styles.picker}
                    />
                </View>
                <Input
                    placeholder="Translation"
                    value={toText}
                    inputContainerStyle=
                        {styles.translationTextContainer}
                    disabled
                    multiline={true}

                    // Allow multiline input for translation text
                    numberOfLines={4}

                    // Limit the number of lines shown (adjust as needed)
                />
                <TouchableOpacity style={styles.button} onPress={translate}>
                    <Text style={styles.buttonText}>Translate it</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

Javascript

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({

    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#f0f0f0',
    },
    wrapper: {
        width: '90%',
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 16,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 5,
    },
    controls: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    picker: {
        height: 40,
        backgroundColor: '#f9f9f9',
        padding: 10,
        flex: 1,
        borderRadius: 8,
    },
    exchangeButton: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#0984e3',
        width: 40,
        height: 40,
        borderRadius: 20,
    },
    exchangeButtonText: {
        color: 'white',
        fontSize: 20,
    },
    button: {
        backgroundColor: '#0984e3',
        borderRadius: 8,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
    },

});

export { styles }

Steps to run the application:

Step 1: To run react native application use the following command:

npx expo start

Step 2: Depending on your operating system type the following command.

• To run on Android:

npx react-native run-android

• To run on iOS:

npx react-native run-ios

Output: