React-native-calendars: i18n: how to use calendar in multiple locales?

[slorber]

Let's say I want to display, on the same view, the calendar in english and in french (or at least be able to toggle the language in app state).

Currently it seems the only way is to use a singleton like `LocaleConfig.defaultLocale = 'fr' but that does not seem appropriate to me. Couldn't we pass the locale as props in any component that need localization?

[tautvilas]

Agree this should be improved. Problem is that XDate locale setup is implemented as singleton. We should check if this can be improved somehow

[slorber]

Actually it's possible to change the singleton of xdate before re rendering and solved my usecase for translated app but it's not ideal. I'll try to add some doc about that soon it should be enough for most usecases

[wumke]

I remembered that locales in moment are well supported, so it should be possible to fill the arrays of LocaleConfig.locales[] by just giving the locales and some options to a 'useMomentLocales(options)' function?
I'm willing to code the changes if it will be added to the repo...

[wumke]

Also, why are the translations and locale not passed into the Calendar component as properties?

[slorber]

I think we should rather migrate away from XDate and use another date lib which does not need singleton.

[pinpong]

+1

[alberss]

Is there any way to make LocaleConfig work? In the example app this part is commented on app.js file
Thanks! 🙏

[slorber]

I've successfully switched from english to french with the following:

LocaleConfig.locales.en = LocaleConfig.locales[''];
LocaleConfig.locales.fr = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre',
  ],
  monthNamesShort: [
    'Janv.',
    'Févr.',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juil.',
    'Août',
    'Sept.',
    'Oct.',
    'Nov.',
    'Déc.',
  ],
  dayNames: [
    'Dimanche',
    'Lundi',
    'Mardi',
    'Mercredi',
    'Jeudi',
    'Vendredi',
    'Samedi',
  ],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
};

LocaleConfig.defaultLocale = 'fr';

Then you just have to run LocaleConfig.defaultLocale = 'fr' or LocaleConfig.defaultLocale = 'en' before triggering a re-render and you'll have the calendar localized.

[alberss]

Thanks @slorber it works! 👌

[anhtuank7c]

This module should support i18n like moment

[k2an]

Thanks :) save the hour 👍 @slorber

[yt-dev]

It doesn't work for me. After I change the language, I also need to change its local setting by manual click the calendar one time to trigger it.

[systemride]

It doesn't work for me. After I change the language, I also need to change its local setting by manual click the calendar one time to trigger it.

I had the same issue if I set the LocaleConfig.defaultLocale in componentDidMount. If I place it in render instead it seems to work.

[yt-dev]

It doesn't work for me. After I change the language, I also need to change its local setting by manual click the calendar one time to trigger it.

I had the same issue if I set the LocaleConfig.defaultLocale in componentDidMount. If I place it in render instead it seems to work.

Hey, I add "key={locale}" to Calendars component, it works.