React NativeでTinder的なスワイプUIを実現するためのライブラリを調べる
NkznSlackのモバイルアプリに「キャッチアップ」という新しい機能が追加されました。
次々と出てくる未読のチャンネルやスレッドのカードを、右へとスワイプすると既読、左へスワイプすると未読のままにする、という、連続した短時間の意思決定をサクサク実行できる、いいUIだと思います。
キャッチアップ
ところでこれ、どう見てもマッチングアプリのTinderのアレなんですよね。
今回Slackも採用しているように、特徴的かつ汎用的なUIなので、しばらく前からUIライブラリとして実装されるケースも散見されていました。
というわけで、React Native向けのTinderのアレっぽいUIライブラリを探して貼っていこうと思います。
Nkzn
以前から私が知っていたのはこれです。
Tinder like react-native card stack swiper
というdescriptionが、もう隠す気がない感じでいいですよね。サクサクと右に左にスワイプできます。
最終更新が2020年4月と、ほぼメンテが止まってしまったので、これから採用するのは難しいのかなとは思うのですが、依存ライブラリがかなり少ないというかほぼない、という点はやや魅力的です。
JavaScript製ですが、d.tsが置いてあるのでTypeScriptからも触れます。
Nkzn
こちらはもう名前の時点で隠す気がありません。
スワイプ中に、どの選択肢になるのかがフェードで表示されるのが素敵ですよね。各種イベントのコールバックも豊富なようなので、痒いところに手が届きそうです。
rn-tinder-card
react-native-reanimated や react-native-gesture-handler がpeerDependenciesなのも、現代のReact Nativeライブラリという感じがしていいですね。それ以外には特にdependenciesもないので、陳腐化しづらさそうなのが好ましいです。
最終更新は2023年10月で、それなりに活発。TypeScriptによる実装なので型については不安点なし。こういうUIを用意したいと思った場合には、割と本命なのかもしれません。
Nkzn
こちらももう名前を隠す気が全くありません。ドラッグ中はカード内というよりカード自体がゆらゆらと揺れるようなエフェクトがかかるのが特徴的です。
react-tinder-card
dependenciesを見ると、react-springがジェスチャーの要になっているようです。
ジェスチャーだけを見るとrn-tinder-cardと好みが分かれやすいところなのですが、こちらにはひとつ大きな特徴があります。 Webでも動きます。
react-springにはweb版とnative版があるので、React DOMでもReact Nativeでも動くんですよね。上記のデモ動画も、Web版で撮影されたものです。
もしモバイルアプリとWebの両方でサービス提供をする中で、共通のUI実装を用意したい場合は、有力な選択肢となるかもしれません。
最終更新は2023年11月、なかなか活発な部類だと思います。
一点だけ「なんでえ……？」となったのが、唯一のdependenciesがp-sleepなんですよね。Promise対応のsleep()関数を作るやつ。そんなん自作したらよくない……？