React Native is a popular framework for building cross-platform mobile applications. It allows developers to write code once and deploy it on both iOS and Android platforms. In this article, we will explore an article script written in React Native that supports multiple languages, including Korean, English, and Kurdish.

In the ever-expanding world of mobile applications, creating multilingual experiences is becoming increasingly important. React Native, a popular framework for building cross-platform mobile apps, offers developers the flexibility to create applications that support multiple languages seamlessly. In this article, we will explore an article script written in React Native that demonstrates how to implement language localization and translation functionality for Korean, English, and Kurdish languages.

The article script is a React Native component called Translation1. It showcases a complete translator interface where users can input text, select the dialect, and view the translated text in real-time. The component leverages various React Native UI components and external libraries to provide a user-friendly and interactive translation experience. To begin, the script imports necessary modules such as React and various React Native components including View, ScrollView, Text, Image, TouchableOpacity, and TextInput. Additionally, custom components like MyStatusBar, MyHeader, and Loader are imported to enhance the functionality and user interface of the translator. For language translation capabilities, the script utilizes the Translator component from the react-native-translator library. This component enables the translation of text from Kurdish Sorani to English and vice versa. The translation is triggered when users input text and submit it for translation or when they change the selected dialect. The UI of the translator interface is constructed using a combination of components, icons, and styles. Users can interact with the interface by typing in the input field, selecting the dialect using a dropdown menu, and utilizing additional functionalities like speech input and image translation. The interface also provides options for users to clear the input, navigate back to the previous screen, and view the t ranslated text.To enhance the user experience, the script incorporates various state variables and hooks. These include useState for managing component state, useRef for referencing the input field, and useEffect for setting up side effects like displaying loaders and controlling the submit flow. The translator script caters to the needs of multilingual applications by providing a solid foundation for building language translation features in React Native. Developers can modify and extend this script to fit their specific requirements, including integrating additional languages or customizing the UI. By leveraging the power of React Native and incorporating language localization and translation capabilities, developers can create mobile applications that break down language barriers and cater to a diverse global audience. The ability to support multiple languages not only enhances user engagement and satisfaction but also opens up new opportunities for reaching broader markets. In the sections that follow, we will delve into the details of the Translation1 script, discussing its various components, functionalities, and usage. Let’s explore how this React Native article script can empower developers to create multilingual applications with ease and efficiency.

import React, { useEffect, useState, useRef, useCallback } from 'react';
import {
  View,
  ScrollView,
  Text,
  Image,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import styles from './styles';
import MyStatusBar from '../../common/focusAwareStatusBar';
import commonColor from '../../constants/colors';
import MyHeader from '../../common/myHeader';
import Translator from 'react-native-translator';
import { Loader } from '../../common/loader';
import ModalDropdown from 'react-native-modal-dropdown';
import {
  blueSpeaker,
  camera,
  voice,
  redSpeaker,
  dropdownIcon,
  arrowUpDown,
} from '../../constants/icons';

const Translation1 = (props) => {
  const sorani = props?.route?.params?.sorani ? props?.route?.params?.sorani : '';
  const drodownOptions = ['KURDISH SORANI', 'KURDISH KURMANJI'];
  const [dropdown, setDropDown] = useState(false);
  const inputRef = useRef(null);
  const [english, setEnglish] = useState('');
  const [inputText, setText] = useState('');
  const [isSorani, setIsSorani] = useState(true);
  const [loading, setLoading] = useState(false);
  const [dropdownText, setDropDownText] = useState('KURDISH SORANI');
  const [submit, setSubmit] = useState(true);
  const [loader, setLoader] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoader(false);
      setSubmit(false);
    }, 12000);
  }, []);

  useEffect(() => {
    setText(sorani);
  }, []);

  useEffect(() => {
    translate();
  }, [isSorani]);

  const translate = useCallback(
    (inputText) => {
      if (inputText?.length > 0) {
        setText(inputText.replace(/\./g, ''));
      }
    },
    [inputText],
  );

  const changeDialect = () => {
    setLoading(true);
    setIsSorani(!isSorani);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  };

  const selected = (idx, value) => {
    setDropDown(!dropdown);
    setDropDownText(value);
    changeDialect();
  };

  const onClear = () => {
    setText('');
    setEnglish('');
  };

  const onBlur = () => {
    setSubmit(false);
  };

  const moveToBack = () => {
    props.navigation.navigate('TransaltorScreen');
    setSubmit(true);
  };

  return (
    <View style={styles?.container}>
      <Loader loading={loader} />
      <MyStatusBar
        backgroundColor={commonColor?.themeColor}
        barStyle={'light-content'}
      />
      <MyHeader goBack={() => props?.navigation.navigate('WelcomScreen')} />
      <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
        <View style={styles.tansltorBox}>
          <View style={styles?.translatorRow}>
            <TouchableOpacity>
              <Image source={redSpeaker} />
            </TouchableOpacity>
            <View style={{ flexDirection: 'row' }}>
              <TouchableOpacity style={{ marginTop: 15, marginLeft: 10 }}>
                <ModalDropdown
                  dropdownStyle={styles.dropdown_2_dropdown}
                  style={styles.dropdown}
                  options={drodownOptions}
                  onSelect={(idx, value) => selected(idx, value)}
                >
                  <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.txtDropDown}>{dropdownText}</Text>
                    <Image
                      source={dropdownIcon}
                      style={{ marginTop: 10, marginLeft: 10 }}
                    />
                  </View>
                </ModalDropdown>
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={{
              height: '70%',
              paddingHorizontal: 20,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <View style={{ width: '100%' }}>
              <TextInput
                ref={inputRef}
                value={inputText}
                onChangeText={(text) => setText(text)}
                placeholderTextColor={commonColor.black}
                multiline={true}
                numberOfLines={7}
                style={styles.inputText}
                onSubmitEditing={(text) => translate(text)}
                onFocus={onBlur}
                blurOnSubmit={false}
                clearButtonMode={'always'}
              />
            </View>
          </View>
          <View style={styles?.translatorRow}>
            <TouchableOpacity>
              <Image source={camera} />
            </TouchableOpacity>
            <TouchableOpacity>
              <Image source={voice} style={{ marginLeft: 10 }} />
            </TouchableOpacity>
          </View>
        </View>
        <TouchableOpacity onPress={moveToBack}>
          <Image
            source={arrowUpDown}
            style={{ alignSelf: 'center', height: 20, width: 25 }}
          />
        </TouchableOpacity>
        {submit === false && inputText?.length > 0 && (
          <Translator
            from={isSorani ? 'ckb' : 'ckb'}
            to="en"
            value={inputText}
            onTranslated={(t) => setEnglish(t)}
          />
        )}
        <View style={styles.tansltorBox}>
          <View style={styles?.translatorRow}>
            <TouchableOpacity>
              <Image source={blueSpeaker} />
            </TouchableOpacity>
            <Text style={styles.txtEnglish}>{'ENGLISH'}</Text>
          </View>

          <View
            style={{
              height: '70%',
              paddingHorizontal: 20,
              justifyContent: 'center',
            }}
          >
            <Text style={styles.inputText}>
              {inputText?.length > 0 ? english : ''}
            </Text>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

export default Translation1;

The script above is a React Native component called Translation1. It contains various UI elements and logic for translating text from Kurdish Sorani to English. Here are the key features of the script:

1. Importing required modules and components:

• React and other React Native components are imported to build the UI.
• Custom components like MyStatusBar, MyHeader, and Loader are imported for additional functionality.
• The Translator component from the react-native-translator library is imported for text translation.

1. Component state and initialization:

• The component initializes its state variables such as dropdown, inputText, isSorani, etc.
• The useRef hook is used to create a reference to the input field.
• The useEffect hook is used to set up side effects, like setting loader and submit flags.

1. User interface and interaction:

• The component renders a UI with various components like View, TouchableOpacity, Text, Image, TextInput, etc.
  –

These UI components are arranged to create a translator interface where users can input text, select the dialect, and view the translated text.

• Interaction with the UI is handled through functions like changeDialect, selected, onClear, onBlur, and moveToBack.
• Images/icons are used for actions like speaking, using the camera, and voice input.
• The ModalDropdown component is used to display and select the dialect options.

1. Translation functionality:

• The translate function is called whenever the dialect changes.
• Text translation is triggered by the TextInput component’s onSubmitEditing event and handled by the Translator component.
• The translated text is displayed in the UI for the selected dialect.

1. Component lifecycle:

• The useEffect hook is used to set timers and perform actions when the component mounts and updates.
• The loader is displayed for a certain duration, and the submit flag is toggled.

This article script provides a foundation for building a language translation feature in a React Native application. Developers can modify and enhance it based on their specific requirements.

Note: This script assumes the availability of the required styles, icons, and other resources used in the code. Ensure that the necessary dependencies and assets are properly set up before using the script.