React-Native-User-Avatarは簡単にアバター画像が作成できるので便利ですね。TypeScriptにも対応しており、GitHubでもスターが多く最もよく使われているAvatarライブラリ−のようです。
基本的な使い方はサイトに記載の通りですぐに使えますが、ドキュメントがかなりあっさりしています。
一つ注意点として、propsのnameは必須指定となっています。画像が指定されていない場合この名前のイニシャルを使うようです。
さて、今回、アバター画像に輪郭をつけたいと思い調べてみましたがPropsで直接指定はできないようです。調べてみると本家のissueに上がっており解決済みとのこと
ここに記載の方法は以下の通り。
<UserAvatar style={[{
backgroundColor: #FFFFFF, borderColor: #0,
borderWidth: 3 }]} size="100" name="Avishay Bar" />
カラー指定をクオートで囲まないなどすでに怪しかんじがしたのですが、少々の修正して動かしてみたが案の定動かない。エラーを見るとstyleプロップはobject以外受け付けないとのこと。色々トライしてみましたが結局動かず。
そこで、今一度docを読んでstyle関連のなかのimageStyleに指定したらあっさり動きました。
imageStyle={{borderWidth: 1, borderColor: "#FFFFFF",}}
ドキュメントは充実したライブラリの方がうれしいですね。
to be a small ray for wonderer