Skip to main content

Internationalization

As mentioned earlier, the boilerplate places a strong emphasis on maintaining a clean separation of concerns. This is particularly important when it comes to organizing the textual content within your application, as it facilitates the process of translating the application into different languages. The boilerplate offers a structured solution for this separation while also providing a translation tool.

To achieve this, the boilerplate leverages the react-i18next library. This library streamlines the task of translating the content within a React application, making it straightforward to switch between different languages within the application's interface.

Translation files structure

All the translations are situated in the src/translations folder. Within this folder, you'll find subfolders for each language. Each language-specific subfolder contains translation files.

These translation files are loaded into the i18n instance, which is located in the src/translations/index.ts file. This setup centralizes and manages the translation resources for your application, making it easier to maintain and switch between different languages as needed.

Going further

As always, we adhere to community best practices rather than custom patterns. If you're interested in delving deeper into the topic of internationalization, We recommend exploring the react-i18next documentation. It provides comprehensive information and guidance on effectively implementing internationalization in your React application.

Good to know

The boilerplate incorporates an Example screen that serves as a demonstration of how to use the i18n library, complete with a button for changing the language.