Supporting Language Switching for Date Formats, Not Just Text, with i18next

This article is an English translation of the original Japanese article. After introducing i18next to a React Native app, dates like 7月24日(金) remained in Japanese on the screen. Just adding more translation JSON does not change places where Date is directly formatted. To avoid having text and dates in different languages, I unified the language detection and passed it to Intl.DateTimeFormat .…

dev.to ·1h ago

A React Native application integrated with i18next, a popular internationalization library, encountered an issue where dates displayed in Japanese remained unchanged despite efforts to translate surrounding text. This discrepancy arose because direct date formatting was not compatible with more extensive translation JSON files. To resolve this, the author unified language detection and applied it to Intl.DateTimeFormat.

Three language preference settings were established: Japanese, English, and device-default, bringing the total to three distinct options. These preferences are stored securely, and the device's locale is detected using Hermes' Intl.DateTimeFormat function. When the system language is selected, the detected device locale is utilized. This implementation involves calling i18n.changeLanguage whenever the UI undergoes modifications.

Previously, months and weekdays were managed through arrays, with strings being assembled manually. This approach has been replaced by Intl.DateTimeFormat, simplifying the process. The formatScheduleDate function takes a Date object and language preference, returning a formatted date string according to the specified locale.

In the application's components, i18n.resolvedLanguage is employed to ensure consistency with i18next's adopted language, including fallback options. The language setting is integrated throughout the app, starting with saving language preferences, followed by the dashboard and tabs. Main screens for attendance registration, settings, notifications, admin screens, and date displays were addressed next. By addressing date support last, the author could verify its functionality independently from text translation gaps.

The order of implementing language support was crucial, starting with language saving, progressing through the dashboard and tabs, and concluding with main screens, settings, notifications, admin screens, and date displays. This method allowed for the verification of date support separately from text translation gaps. The translation coverage gradually increased, beginning with handling dates, times, numbers, and error messages, which also needed to adapt to the language setting.

Ultimately, the author emphasizes that merely examining strings passed through the translation function does not signify the completion of multi-language support. Displays generated outside JSON files must also connect to the language setting. This comprehensive approach ensures that i18next effectively manages both text translation and date formatting, providing a seamless user experience in multiple languages.

Written by urgent.news from Dev.to's reporting — not their text. Machine-written — it may contain errors, so check the original before relying on it.