React Native+Expo+AmplifyのCognito認証画面を日本語化する

React Native + Expo + Amplify + Cognito で認証機能は簡単に実装できるのですが、デフォルトだと表示言語が英語のため実用的ではありません。

ですので、認証画面を日本語化する必要があります。

とは言っても、そんなに難しいことではなく、Amplify のI18nモジュールを読み込んで、英語と日本語の対応を記述するだけです。

具体的なコードは以下のようになります。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { withAuthenticator } from 'aws-amplify-react-native';
import { I18n } from 'aws-amplify';
import Amplify from 'aws-amplify';

Amplify.configure({
  Auth: {
    // REQUIRED - Amazon Cognito Identity Pool ID
    identityPoolId: '.....', 
    // REQUIRED - Amazon Cognito Region
    region: '.....', 
    // OPTIONAL - Amazon Cognito User Pool ID
    userPoolId: '.....',
    // OPTIONAL - Amazon Cognito Web Client ID
    userPoolWebClientId: '.....', 
    oauth: {},
  },
  Analytics:{
    disabled:true
  },
});

function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

export default withAuthenticator(App, { includeGreetings: true });


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const dict = {
  'ja': {
    'Back to Sign In': 'サインイン画面に戻る',
    'Confirm': '確認',
    'Confirmation Code': '検証コード',
    'Confirm a Code': '検証コードの確認',
    'Confirm Sign Up': 'アカウントの検証',
    'Create a new account': 'アカウントの新規登録',
    'Email': 'メールアドレス',
    'Enter your confirmation code': '検証コードを入力してください',
    'Enter your new password': '新しいパスワードを入力してください',
    'Enter your password': 'パスワードを入力してください',
    'Enter your username': 'ユーザー名を入力してください',
    'Forgot Password': 'パスワードをお忘れの方 ',
    'Hello': 'こんにちは ',
    'Password': 'パスワード',
    'Password cannot be empty': 'パスワードは必須入力です',
    'Phone Number': '電話番号',
    'Please Sign In / Sign Up': 'サインインまたは新規登録をしてください',
    'Resend code': '検証コードの再送',
    'Send': '検証コードの送信',
    'Sign In': 'サインイン',
    'Sign Out': 'サインアウト',
    'Sign Up': 'アカウントの新規登録',
    'Sign in': 'サインイン',
    'Sign in to your account': 'サインイン',
    'Submit': '実行',
    'User does not exist': 'ユーザーが存在しません',
    'Username': 'ユーザー名',
    'Username cannot be empty': 'ユーザー名は必須入力です',
    'Username/client id combination not found.': 'ユーザー名が見つかりません',
  }
};

I18n.putVocabularies(dict);
I18n.setLanguage('ja');