Hello guys, here we are going to discuss about “How to create a bridge for multi language support in react native“.

Example Output –

Why i choose this topic –

Well just because my last post is all about how to provide the multi language support in react native, if you not read that please visit it first

click here

after writing multi language support blog, i am getting multiple mail or comment for how to create a bridge between multi languages app.

and another reason for writing this blog is, i didn’t found any useable blog on internet.

So i decide to write this blog, let’s start to writing i am trying to make it simple and if you face any issue then ask me.

Follow all the steps carefully for creating a bridge between languages –

Step 1 –

For creating a bridge between languages, i am going to use local storage so first you need to install the local storage plugin.

npm i @react-native-community/async-storage

And link the plugin if your react native version is below than 0.60

Step 2 –

Import the plugin where you want to create the bridge

import AsyncStorage from '@react-native-community/async-storage';

Step 3 –

Now here we are going to cover the design part

render() {
 return (   
    <View style={{flexDirection: 'row'}}>
                    <TouchableOpacity
                      onPress={() => {
                        this.languageChagne('en');
                      }}
                      style={{
                        width: '50%',
                        height: moderateScale(60),
                        shadowColor: Colors.shadow,
                        shadowOffset: {width: 0, height: 0},
                        shadowOpacity: 1,
                        shadowRadius: moderateScale(8),
                        elevation: moderateScale(8),
                        backgroundColor: Colors.white,
                        borderRadius: moderateScale(15),
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        paddingLeft: moderateScale(16),
                        paddingRight: moderateScale(16),
                        marginBottom: moderateScale(10),
                      }}>
                      <Text
                        style={{
                          color: Colors.titleFont,
                          fontSize: moderateScale(15),
                          fontFamily: Fonts.nunitoBold,
                        }}>
                        {'English'}
                      </Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      onPress={() => {
                        this.languageChagne('ger');
                      }}
                      style={{
                        width: '50%',
                        left: moderateScale(5),
                        height: moderateScale(60),
                        shadowColor: Colors.shadow,
                        shadowOffset: {width: 0, height: 0},
                        shadowOpacity: 1,
                        shadowRadius: moderateScale(8),
                        elevation: moderateScale(8),
                        backgroundColor: Colors.white,
                        borderRadius: moderateScale(15),
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        paddingLeft: moderateScale(16),
                        paddingRight: moderateScale(16),
                        marginBottom: moderateScale(10),
                      }}>
                      <Text
                        style={{
                          color: Colors.titleFont,
                          fontSize: moderateScale(15),
                          fontFamily: Fonts.nunitoBold,
                        }}>
                        {'German'}
                      </Text>
                    </TouchableOpacity>
                  </View>
 )
}

Step 4 –

Here we provide the definition of function languageChagne()

languageChagne(lang) {
    AsyncStorage.setItem('lang', lang);
    setI18nConfig();
    setTimeout(() => {
      this.languageChagneAPICall(lang); // call your backend API
    }, 500);
  }

Step 5 –

In this step we are going to identify the language and change it, so if you follow my last last blog for creating multi language support then you know that there is a file which contain the code of identifying the language, so now we need to change that file, which path is – src/translations/translateConstant.js

import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
import {I18nManager} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

var language_change;
var fallback;

export const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  ger: () => require('./ger.json'),
  en: () => require('./en.json'),
};

export const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key),
);

export const setI18nConfig = lang => {
  AsyncStorage.getItem('lang').then(language => {
    language_change = language;
    if (language_change == 'ger') {
      fallback = {languageTag: 'ger', isRTL: false};
    } else {
      fallback = {languageTag: 'en', isRTL: false};
    }
    const {languageTag, isRTL} = fallback;

  // clear translation cache
    translate.cache.clear();

 // update layout direction
    I18nManager.forceRTL(isRTL);
    I18nManager.allowRTL(isRTL);
// set i18n-js config
    i18n.translations = {[languageTag]: 
    
  translationGetters[languageTag]()};
    i18n.locale = languageTag;
  });

};

That’s it, now you can run your application it create the bridges between you’r languages, here i am discuss and handle only for two language.

and you can find my post on medium as well click here please follow me on medium as well.

So the topic “How to create a bridge for multi language support in react native” is completed.

And if any other query/issue, please feel free to ask.

Happy Coding Guyz.