Expo アプリで Gravatar アイコンを表示する

Expo / React Native で構築されたアプリに Gravatar のアイコンを表示する方法です。

ユーザーのメールアドレスに基づいたアイコンを登録できる Gravatar を利用すれば、ユーザー毎のアイコンを表示することができ、アプリ内でのユーザーの区別がしやすくなります。

コード

import * as Crypto from "expo-crypto";
// 
const mailAddress = 'test@example.com'
const hash = await Crypto.digestStringAsync(
    Crypto.CryptoDigestAlgorithm.MD5,
    mailAddress.trim().toLowerCase()
);
//

<Image source={{ uri: `https://www.gravatar.com/avatar/${hash}?d=retro` }} />

MD5 ハッシュの作成には expo-crypto モジュールを利用します。

画像の表示には Image コンポーネントを利用し、ユーザーが Gravatar に登録していない場合のプレースホルダー画像は d オプションで指定します。