Add internationalization and RTL layout support to your React Native app using react-i18next
HTML-код
- Опубликовано: 9 сен 2024
- In this video tutorial, I show you how to add react-i18next to your react native app to handle translations, how to switch the language, and most importantly how to handle Right to Left layouts for languages like Arabic, Urdu, Farsi, Hebrew, etc.
Code: github.com/saa...
You can find all relevant links in the readme file of the Github repo.
My blog: saadibrah.im/
Linkedin: / saad-ibrahim-749a4330
This helped me a lot in implementing i18next in my React Native app. Thanks and may God bless you!
That is the most useful video on earth, Thank you very much!
We all viewers urge you to make more unique videos like that.
Thank you very much for that content.
Many thanks! I had no idea that switching layout direction in RN should be done in so messy and unobvious way.
Very useful and productive tutorial thanks for sharing you save mine lots of time wasting searching it.
great presentation , and it helped me a lot .. Ty
08:01 - i18next implementation
15:12 - RTL layout
Thank you very much for this tutorial. Very nice presentation 👍👌
Glad you liked it.
Saad Ibrahim Bro could you please share your WhatsApp or Instant message to connect with you. Thank you
Very nice explanation ...helped alot...keep it up ..make something good with drawer and explain with good example ...hats off
thank you for this useful tutorial
thank you so much, so helpful
Amazing, thank you brother
useful tutorial. thanks
informative brother
that was helpful. thank you :)
awsome man
Your video about making the site Persian was excellent. But there is still a problem.
Texts are written from the right, but Lyot is still arranged from the left.
can you help us about this problem?
please visit react native docs on this matter. they got info on this.
Amazing Tutorial.
Very Helpful
But I have an Issue
we are working on more than 2 languages app
SO we have two left align language and one right align
how can i create a check for this
In index.js file when we set language and is there any way to change alignment without restarting app
Hello Saad, thank you so much for such an informative tutorial.
I am new to React Native, how can I Force RTL my app with single language? I use Kurdish CKB.
does the react native restart work on expo ? if not how can i reach the same behaviour on expo ? ((everything is working fine except i should manually restare the app to see rtl flip)
forceRTL always returning false in ios any workaround for this?
even after it sets to true
i see this method usefull for whole of the app ! but what if i want to use it just in a one or two components ? is there any helps !!
Can we also put the translations in separate files?
import english from "../../locales/en/translation.json";
import arabic from "../../locales/ar/translation.json";
const resources = {
en: {
english: english
},
ar: {
arabic: arabic
},
};
in the file where you want to use.
t('english:key')
Salam bro, how about expo?
What do I need to change when it comes to expo to get this to work.
Thanks
Actually for expo, its even simpler, please check this link:
docs.expo.io/guides/running-in-the-browser/
@@msaadibrahim Thank you sir for sharing this useful video. But the link you have provided doesn't have anything related about RTL or translations. Can you provide us some resouce for expo usage.
It will be very helpful.
Thanks
This helped me a lot in implementing i18next in my React Native app. Thanks and may God bless you!