Cara Membuat Aplikasi Multi-Bahasa di React Native

Cara Membuat Aplikasi Multi-Bahasa di React Native
Cara Membuat Aplikasi Multi-Bahasa di React Native

KonsepKoding.com kali ini akan membahas bagaimana cara membuat aplikasi multi-bahasa menggunakan React Native. Dengan aplikasi multi-bahasa, Anda dapat menjangkau lebih banyak pengguna dari berbagai negara. Artikel ini akan memberikan panduan lengkap, mulai dari konfigurasi awal hingga implementasi multi-bahasa menggunakan library populer seperti react-i18next.

Apa itu Aplikasi Multi-Bahasa?

Aplikasi multi-bahasa adalah aplikasi yang mendukung berbagai bahasa. Misalnya, pengguna dari Indonesia dapat melihat antarmuka aplikasi dalam Bahasa Indonesia, sementara pengguna dari Inggris melihat antarmuka dalam Bahasa Inggris. Fitur ini penting untuk aplikasi yang menargetkan pasar global.

Persiapan

Sebelum mulai, pastikan Anda sudah menginstal React Native dan membuat proyek baru. Jika belum, Anda bisa mengikuti panduan di artikel Panduan Lengkap Memulai Proyek React Native untuk Pemula.

Setelah proyek siap, ikuti langkah-langkah berikut:

1. Instalasi Library yang Dibutuhkan

Kita akan menggunakan react-i18next, library yang populer untuk mengelola multi-bahasa di React Native. Jalankan perintah berikut untuk menginstalnya:

bash
npm install react-i18next i18next react-native-localize

Kemudian, tambahkan juga @react-native-async-storage/async-storage untuk menyimpan preferensi bahasa pengguna:

bash
npm install @react-native-async-storage/async-storage

2. Konfigurasi File Bahasa

Buat folder bernama locales di dalam proyek Anda, lalu tambahkan file JSON untuk setiap bahasa. Contohnya:

locales/en.json

json
{
  "welcome": "Welcome to KonsepKoding.com!",
  "greeting": "Hello, how are you?"
}

locales/id.json

json
{
  "welcome": "Selamat datang di KonsepKoding.com!",
  "greeting": "Halo, apa kabar?"
}

3. Konfigurasi i18next

Buat file baru bernama i18n.js di root proyek Anda dan tambahkan konfigurasi berikut:

javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'react-native-localize';
import AsyncStorage from '@react-native-async-storage/async-storage';

import en from './locales/en.json';
import id from './locales/id.json';

const resources = {
  en: { translation: en },
  id: { translation: id },
};

const getLanguage = async () => {
  const savedLanguage = await AsyncStorage.getItem('language');
  if (savedLanguage) return savedLanguage;

  const deviceLanguage = Localization.getLocales()[0].languageCode;
  return deviceLanguage === 'id' ? 'id' : 'en';
};

getLanguage().then((language) => {
  i18n
    .use(initReactI18next)
    .init({
      resources,
      lng: language,
      fallbackLng: 'en',
      interpolation: { escapeValue: false },
    });
});

export default i18n;

4. Menggunakan i18next dalam Komponen

Selanjutnya, gunakan hook useTranslation untuk menerjemahkan teks di komponen Anda.

App.js

javascript
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import './i18n';

export default function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = async (lang) => {
    await AsyncStorage.setItem('language', lang);
    i18n.changeLanguage(lang);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('welcome')}</Text>
      <Text style={{ marginBottom: 20 }}>{t('greeting')}</Text>
      <Button title="Bahasa Indonesia" onPress={() => changeLanguage('id')} />
      <Button title="English" onPress={() => changeLanguage('en')} />
    </View>
  );
}

5. Uji Aplikasi Anda

Jalankan aplikasi menggunakan perintah berikut:

bash
npm start

Setelah aplikasi berjalan, Anda akan melihat teks dalam bahasa Inggris secara default. Cobalah mengubah bahasa dengan tombol yang disediakan.

Kesimpulan

Dengan menggunakan react-i18next, membuat aplikasi multi-bahasa di React Native menjadi sangat mudah. Anda dapat menambahkan bahasa lain hanya dengan menambahkan file JSON baru dan memperbarui konfigurasi.

Jangan lupa untuk terus belajar pengembangan aplikasi di KonsepKoding.com. Kami selalu menghadirkan tutorial dan tips menarik untuk mendukung perjalanan coding Anda!


Baca Tutorial React Native KonsepKoding Lainnya :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS
#34 Tutorial View Aspect Ratio Square React Native