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 オプションで指定します。