How to fix i18next::translator: missingKey en error in React native?

Question

I am creating a react native application for Android. I want to do language translation using i18next. I get the following error when I deploy my app

 LOG  i18next::translator: missingKey en translation hello hello
 LOG  i18next::translator: missingKey en translation this line is translated this line is translated
 LOG  i18next: languageChanged hi
 LOG  hi
 LOG  i18next::translator: missingKey hi translation hello hello
 LOG  i18next::translator: missingKey hi translation this line is translated this line is translated
 LOG  i18next::translator: missingKey hi translation hello hello
 LOG  i18next::translator: missingKey hi translation this line is translated this line is translated

This is i18n.tsx code

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { useTranslation as useTranslationBase } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translateen from './en.json';
import translatehi from './hi.json';

// Initialize i18n with the translations and configuration options
i18n
.use(LanguageDetector)
.use(initReactI18next).init({
  resources: {
    en: { translation: translateen },
    hi: { translation: translatehi },
  },
  fallbackLng: 'en',
  lng: 'en',
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});

type TranslationKeys = keyof typeof translateen['translation'];

export const useTranslation = () => useTranslationBase<TranslationKeys>();


export default i18n;

This is my App.tsx code

import React, {useState} from 'react';
import {View, Text, Pressable} from 'react-native';
import {useTranslation} from './locales/i18n';

const App: React.FC = () => {
  const {t, i18n} = useTranslation();
  const [currentLanguage, setLanguage] = useState<string>('en');

  const changeLanguage = (value: string) => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch((err: Error) => console.log(err));
    console.log(i18n.language);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-evenly',
      }}>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('hello')}
      </Text>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('this line is translated')}
      </Text>
      <Pressable
        onPress={() => changeLanguage('en')}
        style={{
          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>Select English</Text>
      </Pressable>
      <Pressable
        onPress={() => changeLanguage('hi')}
        style={{
          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>हिंदी का चयन करें</Text>
      </Pressable>
    </View>
  );
};

export default App;

Following is my hi.json code which is present in locales folder

{
  "translation": {
    "hello":"नमस्ते",
    "this line is translated":"यह पंक्ति अनुवादित है"
  }
}

I have no clue how to fix this. I have referred the following links

react i18next throws translator missingKey en translation and useTranslation() hooks not working

Getting i18next translator Missing key

I even modified my i18n.tsx code to the following

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translateen from './en.json';
import translatehi from './hi.json';

i18n
.use(initReactI18next).init({
  resources: {
    en: { translation: translateen },
    hi: { translation: translatehi },
  },
  fallbackLng: 'en',
  lng: 'hi',
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});


export default i18n;

and my App.tsx to the following

import React, {useState} from 'react';
import './locales/i18n';
import {View, Text, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
const App: React.FC = () => {
  const {t, i18n} = useTranslation();
  const [currentLanguage, setLanguage] = useState<string>('en');

  const changeLanguage = (value: string) => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch((err: Error) => console.log(err));
    console.log(i18n.language);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-evenly',
      }}>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('hello')}
      </Text>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('this line is translated')}
      </Text>
      <Pressable
        onPress={() => changeLanguage('en')}
        style={{
          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>Select English</Text>
      </Pressable>
      <Pressable
        onPress={() => changeLanguage('hi')}
        style={{
          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>हिंदी का चयन करें</Text>
      </Pressable>
    </View>
  );
};

export default App;

But still I'm not able to solve this. Any suggestions?

Answer 1

It seems like I was not exporting my translation. So I created translations.tsx file and added the following code

export const en = {
    title:"Multilingual app",
    hello: "Hello!",
    message: "Welcome to my app.",
    nextPage:"Go to next Page",
    SwitchLanguage:"Switch Language",
    Home:"Home Page",
    GotoDetail:"Go to Detail",
    Detail:"Detail Page",
    detailMessage:"This is my Multilingual App",
    GoBack:"Go Back"
  };
  
  export const hi = {
    title:"बहुभाषी ऐप",
    hello: "नमस्ते!",
    message: "यह पंक्ति अनुवादित है",
    nextPage:"अगले पेज पर जाएँ",
    SwitchLanguage:"भाषा स्विच करें",
    Home:"होम पेज",
    Detail:"विवरण पृष्ठ",
    GotoDetail:"विवरण पर जाएं",
    detailMessage:"यह मेरा बहुभाषी ऐप है",
    GoBack:"वापस जाओ"    
  };

And this the code I used for translation:

import { en, hi } from '../locales/translations';
const handleLanguageChange = async () => {
    if (language === en) {
      setLanguage(hi);
      await saveLanguagePreference('hi');
    } else {
      setLanguage(en);
      await saveLanguagePreference('en');
    }
  };
<View style={{ flexDirection: 'row' }}>
        <Pressable style={{ backgroundColor: '#33A850', marginBottom: 5, padding: 20 }} onPress={handleLanguageChange}>
          <Text>{language.SwitchLanguage}</Text>
        </Pressable>
        <Pressable
          style={{ backgroundColor: '#FF0000', marginBottom: 5, marginLeft: 10, padding: 20 }} onPress={() => navigation.navigate('Details')}>
        <Text>{language.GotoDetail}</Text>
      </Pressable>
      </View>