Change Splash Image on native android when i18n.locale changes

Question

i am developing my first react native app.First of all sorry for my long question.

I am supporting english and japanese languages (en,jp) using i18n. I have one settings screen within that we can switch between these two languages.While switching to another, i am restarting my whole app using the react-native-restart.Everything works fine in all screens of my app.

But, I have added native android splash image to avoid the white screen on launching the react-native-app.Now, the problem is that, on changing i18n.locale = 'en' it does not changing the native android locale.I have two splash images(one for 'en' and another one for 'jp'). Always i am getting first image(added for 'en') as my splash.

Solution i have tried

i put the splash.png at all mipmap-(mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi) for 'en'. And created another folder mipmap-jp-(mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi) for 'jp' and put another image.

Below is my folder structure for supporting 'jp' and 'en'.

res:

->values

->values-jp

->mipmap-hdpi,mdpi,xhdpi,xxhdpi,xxxhdpi

->mipmap-jp-hdpi,mdpi,xhdpi,xxhdpi,xxxhdpi

i18n.js

import RNLanguages from 'react-native-languages';
import i18n from 'i18n-js';

import en from './en';
import jp from './jp';

i18n.locale = RNLanguages.language;
i18n.fallbacks = true;
i18n.translations = {en,jp};

RNLanguages.addEventListener('change', ({ language }) => {
    i18n.locale = language
  })

export default i18n;

Settings.js

...
onChange(value){
if(value === 'USA English'){
            setLanguage('en').then().catch(err=>{
                console.log(err);
              });
              i18n.locale = 'en';
        }
        else{
            setLanguage('jp').then().catch(err=>{
                console.log(err);
            });
            i18n.locale = 'jp';

        }
}
...

strings.xml

<resources>
    <string name="app_name">appname in eng</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:datePickerDialogTheme">@style/MyDialogTheme</item>
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@mipmap/splash</item>
        <item name="android:statusBarColor">@color/theme</item>
    </style>
    <style name="MyDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#00c786</item>
</style>

</resources>

Under values-jp folder i just changed the app_name in strings.xml and styles.xml have the same content.

I have tried the ways i know.I want to setup android locale onChanging the language and so that it will change the splash image and app_name based on the language.someone please help me!

I just made one mistake here.Japanese language code is ja. i have used jp. Now, on changing the phone language, splash and app_name is changing. I did not found a way to change the phone language when i18n.locale changes.I think it cannot be done.Is it? — Johncy
How you switched the language ? I am struggling with this part ? Can you please guide ? — Dazzile Pro

Chetan Joshi Chetan Joshi · Accepted Answer · 2019-02-04T10:52:19

You need to make . different image folders as par localisation just like making different string.xml files

Localize your app

Assume that an app includes a default set of graphics and two other sets of graphics, each optimised for a different device setup:

res/drawable/

Contains default graphics.

res/drawable-small-land-stylus/

Contains graphics optimised for use with a device that expects input from a stylus and has a QVGA low-density screen in landscape orientation.

res/drawable-ja/

Contains graphics optimised for use with Japanese.

Change Splash Image on native android when i18n.locale changes

1 Answers