【React Native】画面内の特定の要素を強調できるライブラリ「react-native-walkthrough-tooltip」

アプリ画面の中で、指定したボタンを強調表示して説明文を表示したいということがあったのですが、ぴったりのライブラリを見つけたのでご紹介。
「react-native-walkthrough-tooltip」というライブラリで、指定した要素を強調＆吹き出しを表示できます。

GitHub のページはこちらから。

jasongaare/react-native-walkthrough-tooltip: An inline wrapper for calling out React Native components via tooltip
https://github.com/jasongaare/react-native-walkthrough-tooltip

スクリーンショットが Gif 画像で掲載されているので参考になりました

まず、ライブラリのインストールは下記のコマンドで行います。

npm install react-native-walkthrough-tooltip --save

あとは、下記のサンプルコードを参考に、任意の場所に実装してください。
まず、下記のインポート文でライブラリをインポートします。

import Tooltip from 'react-native-walkthrough-tooltip';

で、強調表示したい要素を <Tooltip> で囲めばOKです。

<Tooltip
  isVisible={this.state.toolTipVisible}
  content={<Text>吹き出しの説明文</Text>}
  placement="top"
  onClose={() => this.setState({ toolTipVisible: false })}>
  {/* 強調したい要素をここに追加 */}
</Tooltip>

強調表示の表示/非表示は isVisible で指定しているので、ここでは state の toolTipVisible で管理するようにしています。
吹き出し内の説明文は content に指定します。
なお、吹き出しのスタイルを指定したいときは、contentStyle を使用してください。

これ以外にも、吹き出しの位置や、背景色の設定などかなり細かいところまで設定ができました。
頑張ればアプリ初回起動時のチュートリアルとかも作れそうですね。
個人的には、かなりおすすめのライブラリです！

以上、React Native でアプリ画面内の特定の要素を強調できるライブラリ「react-native-walkthrough-tooltip」のご紹介でした。
ご参考になれば幸いです。