React Nativeでスナックバーを表示させる

React nativeで何かアクションを起こしたときに「成功」のような表示を行いたい。

Toast / トースト（画面に浮き上がって消える）やModal / モーダル（ポップアップ表示）、SnackBar / スナックバー（アプリ領域にバー形式で表示する）を考えます。

react-native: ^0.61.5expo: ~36.0.0

ネイティブトーストと疑似トースト

どうやって表示するのがいいかと考えていて最初に思い出したのがトーストです。

React NativeではAndroid用のネイティブモジュールがあります(Doc:RN, Expo)。

性能はいいのかもしれませんがiOSでは使えませんし限られたことしかできません。

 

Viewで同じような動きのするものがあれば共通して使えますし拡張性がある。

この考え方のライブラリを探すとreact-native-root-toast★1.4kやreact-native-easy-toast★905などがあります。

ある程度スタイルを変更できますが、より簡単にスタイリッシュに表示したい。

モーダル

アクションの確認に使っていたモーダルをうまいこと使えないか考えてみます。

React Nativeでモーダル表示で複数試したことがありますが、使っているうちにreact-native-modalを使えば問題ないなというのが正直なところです。

ただちょっとした表示にモーダルを使ってもテンポが悪そうなので今回は使わない。

スナックバー

トーストで探しているときにreact-native-toasterが簡単で見た目良くていいなと思ったんですが、コードが古くて以下のワーニングが出ます。

Warning: componentWillMount has been renamed, and is not recommended for use.

廃止されたライフサイクルを使っているようですね。

無視して動かしてみても表示されませんでした。

 

続いて探しているとトースト、モーダル、スナックバーを使えるreact-native-smart-tipを見つけます。

上手く動きました。

UsageやExampleが少し大雑把ですが単純な関数呼び出しだけで済むのは楽です。

ただソースを見る限り改行表示や色・高さ以外のスタイルの変更は出来なさそう。

 

ここでスナックバーという名称を思い出したのでそっちで調べるとreact-native-snackbarというのが人気みたいです。

さっそく試してみるも動きませんでした。

よく見るとLinkが必要でexpo managedだと使えないんですね。

 

というわけでBare Flowならreact-native-snackbar、Expo managed Flowならreact-native-smart-tipを使うのがよさそうです。

時間があれば自分で作る方が自由度高くていい気もする。