【React Native】吹き出しを簡単に実装できるライブラリ「react-native-balloon」

以前、「【React Native】シンプルな吹き出しを作成する」という記事で、ライブラリを使わずに吹き出しレイアウトを実装する方法についてご紹介しましたが、より簡単に吹き出しが実装できるライブラリがあったのでご紹介としてまとめ。

「react-native-balloon」ライブラリで、GitHub はこちらから。

takahi5/react-native-balloon: React Native UI component for balloon.
https://github.com/takahi5/react-native-balloon

実装方法は、ライブラリを下記のコマンドでインストールします。

npm install react-native-balloon --save

あとは、実装したいページに下記ようにコードを追加すれば完了です！

import Balloon from "react-native-balloon";

<Balloon
  borderColor="#CCC"
  backgroundColor="#FFF"
  borderWidth={1}
  borderRadius={10}
  triangleDirection='left'>
  <Text>吹き出しの内容</Text>
</Balloon>

上記のサンプルコードでは、縁がグレーの白い吹き出しが追加されます。
吹き出しの三角形の位置は triangleDirection で指定しており、今回は左側に指定しています。
なお、吹き出しの幅はデフォルトで 300 になっており、こちらの値は width で指定できます。
また、onPress や onLongPress を追加することもでき、吹き出しをタップまたは長押しした際の挙動を設定できます。

吹き出し三角形の位置やサイズ、吹き出しの角丸の大きさなどがかなり細かく指定できるので、よっぽど特殊なことをしない限りはこれで十分だと思います。
が、幅が数値指定で、今回のアプリのデザイン的にちょっと使いにくかったので、以前投稿したライブラリを使わない方法を採用することにしました。
どちらを使うかについては、状況とお好みにより選択してください。
個人的には、初心者の方や、CSS が苦手な方はライブラリを使用することをおすすめします。

以上、React Native の「react-native-balloon」ライブラリを使って、吹き出しを実装する方法についてでした。
ご参考になれば幸いです。