3

i am currently trying to implement localization depending on the system language of the device but something is not working as required.

I followed the exact same code on expo documentation, for eg. for the button i have i keep getting [MISSING "EN-GB.LOGIN" TRANSLATION] instead of LOGIN.

Here is my code:

welcomeScreen.js

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

i18n.translations = {
en: { login: 'LOGIN'},
ar: { login: 'تسجيل الدخول'},
};

i18n.locale = Localization.locale;
i18n.fallbacks = true;

function WelcomeScreen() {
return (

<Button
      title={i18n.t('login')}
    />
)}

So instead of the code above i decided to go with this:

i18n.js

import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import ar from './locales/ar';  
import en from './locales/en';

i18n.translations = {  
'en': en,
'ar': ar,
};

i18n.locale = Localization.locale.search(/-|_/) !== -1? 
Localization.locale.slice(0, 2): Localization.locale;

i18n.fallbacks = true;

export default i18n;

en.js

const en = { 
'SignUp':{
SignUp:"Sign Up"
}}

ar.js

const ar = {
'SignUp':{
SignUp:"الاشتراك"
}}

SignUpScreen.js

import I18n from '../config/i18n';

function RegisterScreen(props) {
return(
<Button title={I18n.t('SignUp.SignUp')}
)}
kd12345
  • 689
  • 10
  • 29

1 Answers1

2

If you try to console.log(Localization.locale) ... it's not gonna be just en (the key in i18n.translations expected by i18n) ... it'd in the form of en_countryCode ... so you have to slice that part

  i18n.locale = Localization.locale.search(/-|_/) !== -1
    ? Localization.locale.slice(0, 2)
    : Localization.locale;
Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
  • Hi, thank you for getting back to me, will give this a try. Do you suggest i use `import i18n from 'i18n-js'` like the code above or this library `import I18n from 'ex-react-native-i18n'`? – kd12345 Jan 05 '21 at 07:20
  • I personally use `i18next` – Hend El-Sahli Jan 05 '21 at 07:21
  • is there a difference between them? – kd12345 Jan 05 '21 at 07:21
  • if i decide to use i18next do i need make alot of changes to my code? – kd12345 Jan 05 '21 at 07:24
  • I work in ejected-projects ... which is kinda different than expo-projects (I mean ejected-projects give u more flexibility over what modules to choose) ... I'd say go with the one that 'd work smoothly with expo.. – Hend El-Sahli Jan 05 '21 at 07:25
  • thats completely true, btw i gave your code a test and instead of `indexOf('_')` it should be `indexOf('-')` why is that? – kd12345 Jan 05 '21 at 07:27
  • Yes correct ... according to the err-message `[MISSING "EN-GB.LOGIN" TRANSLATION]` .. but you have to check for both `_` and `-` ... cause they vary based on android-version – Hend El-Sahli Jan 05 '21 at 07:33
  • can i do something like this `Localization.locale.indexOf('-' || "_") !== -1? Localization.locale.slice(0, 2): Localization.locale` – kd12345 Jan 05 '21 at 07:35
  • Hey, my friend, I could keep getting back to you ... and this could lead to getting more and more correct-answers ... but believe me, google has to be your best friend if you wanna be a good developer :) – Hend El-Sahli Jan 05 '21 at 08:15
  • Trust me i got told that before 100 times, and i have been searching google for days now trying to solve this problem and couldnt get anywhere. da e7na masreyen zay ba3d ya3ni – kd12345 Jan 05 '21 at 08:22
  • Lol ... keep asking then – Hend El-Sahli Jan 05 '21 at 08:47
  • Hi sorry to bother you again, i updated my question above with the code i am currently using, can you please tell me if what i am doing is correct. Would really appreciate it. – kd12345 Jan 05 '21 at 10:47
  • yes, correct ... Does the error go away? ... – Hend El-Sahli Jan 05 '21 at 12:05