React-native-calendars: Calendar does not update / rerender on LocaleConfig.defaultLocale change

[freshedgarT]

Description

Calendar Component does not update / rerender when changing LocaleConfig.defaultLocale.
We followed the solution described by @slorber on issue #169.
When initially rendering the component the language change works.

Expected Behavior

Calendar should rerender when LocaleConfig.defaultLocale is changed.

Observed Behavior

The calendar does not rerender.

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Reproducible Demo

LocaleConfig.locales.de = {
  monthNames: [
    'Januar',
    'Februar',
    'März',
    'April',
    'Mai',
    'Juni',
    'July',
    'August',
    'September',
    'Oktober',
    'November',
    'Dezember',
  ],
  monthNamesShort: [
    'Jan.',
    'Feb.',
    'Mär.',
    'Apr.',
    'Mai',
    'Jun.',
    'Jul.',
    'Aug.',
    'Sept.',
    'Okt.',
    'Nov.',
    'Dez.',
  ],
  dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
  dayNamesShort: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
};

LocaleConfig.locales.en = LocaleConfig.locales[''];

render() {
  ...
  LocaleConfig.defaultLocale = this.props.languageCode; // global language setting
  return (
    ...
    <Calendar
              current={this.props.selectedMonth}
              firstDay={1}
              theme={calendarTheme}
              onDayPress={this._onDayChange}
              onMonthChange={this._onMonthChange}
              // Collection of dates that have to be marked. Default = {}
              markedDates={this._getMarkedDates(data.allMyEvents) || []}
              hideExtraDays={true}
              renderArrow={CalendarQuery._renderArrow}
            />
  );
}

[donnes]

Hello @freshedgarT I don't know if you could solve your problem, but I'll share my solution for this issue.

Just set this using the componentWillReceiveProps Life Cycle.

import React from 'react';
import { LocaleConfig, Calendar  } from 'react-native-calendars';

LocaleConfig.locales.de = {
    monthNames: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'July', 'August', 'September', 'Oktober', 'November', 'Dezember' ],
    monthNamesShort: [ 'Jan.', 'Feb.', 'Mär.', 'Apr.', 'Mai', 'Jun.', 'Jul.', 'Aug.', 'Sept.', 'Okt.', 'Nov.', 'Dez.' ],
    dayNames: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
    dayNamesShort: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
};

LocaleConfig.locales.en = LocaleConfig.locales[''];

class MyComponent extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (nextProps.languageCode && !this.props.languageCode) {
            LocaleConfig.defaultLocale = nextProps.languageCode;
        }
    }

    // ...rest your code

    render() {
        // ...rest your code
        return (
            <Calendar
                current={this.props.selectedMonth}
                firstDay={1}
                theme={calendarTheme}
                onDayPress={this._onDayChange}
                onMonthChange={this._onMonthChange}
                // Collection of dates that have to be marked. Default = {}
                markedDates={this._getMarkedDates(data.allMyEvents) || []}
                hideExtraDays={true}
                renderArrow={CalendarQuery._renderArrow}
            />
        );
    }
}

[freshedgarT]

Thanks for your reply @donnes.

I have this setup just with shouldComponentUpdate.

I understand that the parentComponent of Calendar rerenders when the language code prop is changed.
How does changing LocaleConfig.defaultLocale rerender the Calendar component?

[slorber]

Hi @freshedgarT

Changing the locale does not trigger a re-render of your component. It just change the locale that will be used by the calendar for next renders. It is your responsability to trigger a re-render of your calendar en locale change.

There are multiple ways to do that in React, not sure which one you should use for this usecase, as the calendar is using virtualized list, it tries itself to optimize renderings

• this.forceUpdate()
• FlatList.extraData: https://facebook.github.io/react-native/docs/flatlist.html#extradata
• putting key={locale} in your component to trigger a full unmount/remount (but you'll loose the scroll position imho)

I don't have this problem to handle in my app, as the user can't switch the language while a calendar is mounted.

[Florian-Bolli]

Thank you! Just what I was looking for.
July in german is Juli ;)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.