This article is an English translation of the original Japanese article.
After introducing to a React Native app, dates like remained in Japanese on the screen.
Just adding more translation JSON does not change places where is directly formatted.
To avoid having text and dates in different languages, I unified the language detection and passed it to .
Three Language Settings The setting values are Japanese, English, and follow device, for a total of three types.
I save the user's choice in .
Only when , I read the device locale from Hermes's .
In this implementation, I also call the moment the UI changes.
Not Handwriting Dates Previously, I held months and weekdays in arrays and assembled strings.
I replace this with .
In components, I use .
I check to align with the language i18next actually adopted, including fallbacks.
Gradually Increasing Translation Coverage Replacing all screens at once means tracking translation gaps and layout breaks simultaneously.
I actually proceeded in the following order: Language saving, dashboard, and tabs Main screens for attendance registration Settings, notifications, admin screens, and date displays By handling date support last, I could verify it separately from text translation gaps.
I check if the weekday changed, if the month-day order changed, and if the layout breaks with long English representations.
Counting only strings passing through the translation function does not determine the completion of multi-language support.
Displays generated outside JSON, like dates, times, numbers, and error messages, also need to connect to the language setting.
References i18next documentation MDN: Intl.DateTimeFormat