How to change App Language in react native | Multiple Language Support | i18next | React-Native

[@ehtishamtahir2187]

How to do RTL?

[@vishalpwr]

Yes, you can achieve it using I18nManager.
import {I18nManager} from 'react-native'
...
I18nManager.forceRTL(true) // forceRLT: boolean

[@govindchoudhary7311]

you saved my hours thanks a lot buddy

[@vishalpwr]

Cheers 🥂

[@fata__morgana]

This was so easy, thanks a bunch !

[@vishalpwr]

Cheers 🥂

[@shamshad_hussain]

daammnnn this is what i need. thank you.

[@riahiyassine7703]

Helpful content... great thanks

[@shebeerretyn]

thanks

[@vishalpwr]

Welcome 😊

[@NashrinFathima-oh7ji]

Very Helpful

[@GaneshguruA]

Is there any way to change whole app languate in single click. instead of writting a alternate word for each word. I dont know, but just a thought. like by using google translate or any other api ?

[@vishalpwr]

One way is you can send this file with your selected language to your server and the server will give you the response of the translated file.
For dynamic data it works well.
And another way you can use any third party API to translate your text.

[@gauthamvijayan]

Perfect!

[@MaheshRajan-ly7vm]

When I close the app and reopen it, will it show the default language (en), right? How can we display the last selected language when reopening the application using AsyncStorage?

[@sameersingh-gb1gy]

i am also trying the same from last 3 days please reply here if you get any solution

[@MaheshRajan-ly7vm]

Yeah, I got it,
Screen One
const changeLangFunc = async (lng) => {
await AsyncStorage.setItem('selectedLanguage', lng); // Store the selected language
i18next.changeLanguage(lng)
setLangModal(false)
}
set the selected lang in an asyncStorage
screen two,
In the screen where we call the functions to execute the changes added the below code,
const setInitialLanguage = async () => {
try {
const selectedLanguage = await AsyncStorage.getItem('selectedLanguage');
if (selectedLanguage) {
i18next.changeLanguage(selectedLanguage);
}
} catch (error) {
console.error('Error retrieving selected language:', error);
}
};
setInitialLanguage(); // Set the initial language on application startup
@@sameersingh-gb1gy

[@ntothektothel]

@@MaheshRajan-ly7vm ty man

[@ibrahimcelen1896]

Danke Schön bruddah!

[@gauthamvijayan]

Also try to mix react-native-localise with this video as part 2

[@mariapaoladigrigoli9506]

Thank u!!

[@vishalpwr]

Welcome 😊

[@marcelraszewski]

What extension do you have that sugest you evreything when you are writting code ??

[@vishalpwr]

I have installed many extensions but you can try these...
Auto import
"React Native Tools"
Auto complete Tag

[@arktutorials9866]

is their any automation available?

[@BukkyOdunsi]

Does it mean you'd have to input the translations manually?

[@vishalpwr]

Yes, for static texts!
For dynamic or api based data/text it requires translation from api or need to add some extra efforts.

[@stilljunior1764]

ERROR TypeError: Cannot read property 'language' of undefined, js engine: hermes
when I am trying to change language

[@vishalpwr]

Please check, have you installed/configured library correctly?
And to change language you can use
import { useTranslation } from 'react-i18next'
const { t, i18n } = useTranslation();
i18n.changeLanguage('fr')

[@vrto3287]

How can I show last selected language when reopening the app ?

[@vishalpwr]

For that you need to persist your selected language in any local storage like AsyncStorge or you can find any other solution to persist user prefs.

[@shubhamsood589]

How to do RTL ?
Layout is not shifting without refreshing app

[@vishalpwr]

Have you tried with, Pinned comment's answer?

[@shubhamsood589]

@@vishalpwr, yes ! Language changes but layout is not shifted.
Can you show it in another tutorial please.

[@yucelduz4897]

does it work with expo

[@vishalpwr]

Yes, i18next and react-i18next absolutely works with Expo.

[@abdullahaboayesha]

The music is freaking stressing me out , had to stop in the middle of tutorial :(

[@vishalpwr]

Ohhh :(, Sorry next time I will try better.

[@prashlovessamosa]

Bro again forgot yt password

[@vishalpwr]

😔