【React Native】「react-native-calendars」ライブラリのカレンダーを日本語化する

以前、「【React Native】「react-native-calendars」ライブラリを使ってカレンダーを実装する」の記事で、アプリにカレンダーを実装する方法について紹介しましたが、今回はそのカレンダーを日本語化する方法についてです。

参考にさせていただいた駄記事はこちらから。

react-native-calendarsの日本語化とカスタム方法 | てぐらる’s ブログ
https://tegralsblog.com/react-native-calendars-custom-japanese/

ライブラリのインストール手順については割愛します！

日本語化の方法ですが、ライブラリをインポートする際に、併せて LocaleConfig も読み込みます。
そして、日本語での月、曜日の名前を設定します。
サンプルコードは下記の通りです。

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

LocaleConfig.locales.jp = {
  monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  monthNamesShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
  dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
};
LocaleConfig.defaultLocale = 'jp';

カレンダーを表示する記述については、前回の記事のコードと全く同じです。
下記のコード を render() の return 内に記述してください。

<Calendar
  monthFormat={'yyyy年 M月'}
  onDayPress={this.onDayPress}
  markingType={'period'}
  markedDates={{
    '2021-02-21': { startingDay: true, color: '#50cebb', selected: true },
    '2021-02-22': { color: '#70d7c7', selected: true },
    '2021-02-23': { color: '#70d7c7', selected: true },
    '2021-02-24': { color: '#70d7c7', selected: true },
    '2021-02-25': { endingDay: true, color: '#50cebb', selected: true },
  }} />

なお私は最初、LocaleConfig の設定を componentDidMount() に記述してしまい、エラーが発生していました…。
日本語かの設定は、ライブラリインポート直後に実行するようご注意ください。

以上、React Native の「react-native-calendars」ライブラリで表示するカレンダーを日本語化する方法についてでした。
ご参考になれば幸いです。