DEV Community

i18n in React Native with Expo

Lucas on June 27, 2024

Project on Github To make this article comprehensive, I have created a repository with a real application where you can analyze the code...

Read full post

Evandro Ribeiro • Oct 30 '24

Brilliant article!

It helped me a lot with implementing the functionality in my current project. I do have a question, though—I tried a few approaches, but without success. Would it be possible to add typing in a way that provides IntelliSense when using the translation? For example, could t('') automatically suggest available keys?

Lucas • Nov 14 '24 • Edited

Thank you for your feedback!
I'm glad the article was helpful in your project! 😊

Regarding your question, yes, it's definitely possible to have TypeScript provide IntelliSense and auto-suggestions for the translation keys. By default, i18next includes embedded type definitions, but to get full type-safety with the t function (including key suggestions and return type checks), you can extend the type definitions.

I recommend checking out the official i18next TypeScript documentation for more details: i18next TypeScript Guide.

Now, when using the t function, you should see auto-suggestions for your defined keys:

t('welcome'); // ✅ Auto-suggests 'welcome' and provides type-checking
t('logout');  // ✅
t('nonExistentKey'); // ❌ Type error if the key does not exist

Marcin Niedbalec (bełk0cik') • Aug 25 '24

I tried to add namespaces but it seems that they doesn't work in Expo or I am doing something wrong :D Could you please make an article how to seperate translations in separate files to each language in Expo?

Lucas • Aug 25 '24 • Edited

I understand the issue you're facing with namespaces in Expo. This article explains the process of creating separate files for each locale in detail, especially in the section on 'Create files for translated locales.' It might be that the namespaces you're using are set up differently.

@mniedbalec you can also check out this GitHub repository for an example of how it's implemented in a working application. Comparing it with your version might help you identify what's going wrong:

github.com/livresaber/app-internat...

Ta Xe • Jun 1

thanks for sharing, Internationalization (i18n) is complex, if you got a chance can try out AutoLocalise which I discovered recently can support Expo quite well, simple and easy, no translation file required
npmjs.com/package/react-native-aut...