Reaccionar proyecto nativo con expo-localización e i18n-js

Question

Actualmente estoy tratando de implementar la localización según el idioma del sistema del dispositivo, pero algo no funciona como se requiere.

Seguí exactamente el mismo código en la documentación de expo, por ejemplo. para el botón que tengo, sigo recibiendo en [MISSING "EN-GB.LOGIN" TRANSLATION]lugar de LOGIN.

Aquí está mi código:

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')}
    />
)}

Entonces, en lugar del código anterior, decidí ir con esto:

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')}
)}

Answer 1

Si intentas console.log(Localization.locale)... no será solo en(la clave i18n.translationsesperada por i18n) ... tendría la forma de en_countryCode... así que tienes que cortar esa parte

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