React Nativeならボトムシートが超簡単に作れる!ネイティブ開発から乗り換えた理由

先日転職をしたばかりの私にとって、最初のタスクの一つがReact Nativeでのボトムシート作成でした。

ネイティブAndroid開発出身の私としては、ネイティブでボトムシートを作るのと同じくらい大変な作業になるだろうと覚悟していました。ところが、それは大きな間違いでした!あまりの簡単さに感動し、React Nativeでボトムシートを作成するシンプルなチュートリアルを書くことにしたのです。

ボトムシートとは、画面下からスライドして表示される便利なUIコンポーネントで、多くの場合さまざまな選択肢やアクションが含まれています。モダンなアプリデザインでは非常に一般的な要素で、UberやZomatoなど数多くの有名アプリでも採用されています。

完成イメージは以下の通りです。

それでは早速、React Nativeでボトムシートを作成する手順を見ていきましょう。

準備：プロジェクトの作成

まず、React Nativeで新しいプロジェクトを作成します。ここではexpo-cliを使用します。expo-cliに馴染みがない方や、React Nativeを始めたばかりの方は、公式ドキュメントをご確認ください。

今回のプロジェクト名は「BottomSheetDemo」としました。

次に、react-native-modalboxをインストールします。このライブラリを使うと、アニメーション、表示位置、背景（バックドロップ）など、多彩な機能があらかじめ組み込まれているので、少ないコード量でボトムシートを実装できます。

$ expo install react-native-modalbox@1.7.1

注意：必ずバージョン1.7.1をインストールしてください。最新版にはbackdropPressToCloseが正常に動作しないバグが存在します。

モーダルの作成

それでは、モーダル本体を作成していきましょう。プロジェクト生成時に含まれる初期コードを削除し、App.jsファイルに以下のコードを追加してください。

これがボトムシート（モーダル）の最小構成です。まずはモーダルの中央にテキストを表示するだけのシンプルな形から始めます。

インタラクションの追加

次に、ボタンを押したときにボトムシートが表示されるようにしましょう。

画面中央にシンプルなボタンを配置します。

このボタンをクリックすると、ボトムシートの表示／非表示を切り替えます。そのために、ReactフックのuseStateを使って状態を管理します。

モーダルには「isOpen」というpropが用意されており、これを切り替えるだけでボトムシートの表示・非表示を簡単に制御できます。

ただ、その前にコードが少し散らかってきたので、モーダル部分を他のコードから分離しておきましょう。モーダルを返す専用の関数を作成します。

コードがかなりすっきりしましたね。ただ、このままではまだボトムシートらしく見えません。最後にスタイルを追加する必要があります。

スタイルを追加しよう！

StyleSheetを作成し、以下のスタイルを追加します。

最終的なコード全体は以下のようになります。

これで、React Nativeによるボトムシートの完成です。とてもシンプルで、ネイティブAndroidで実装するよりもはるかに手軽だと実感しました。

iOSについては実際に試したことがないため何とも言えませんが、iOS開発者の方やiOSでボトムシートを作成した経験のある方は、ぜひその体験談を聞かせてください。

また、モバイル開発者向けのコミュニティ「AndroidVille SLACKワークスペース」では、最新技術の学び、特にAndroid開発、RxJava、Kotlin、Flutter、モバイル開発全般に関する情報が活発に共有されています。参加は完全無料なので、こちらのリンクからぜひご参加ください。

この記事が役に立ったら、Facebook、WhatsApp、LinkedInでのシェアをお忘れなく！

筆者はLinkedIn、Quora、Twitter、Instagramでも活動しており、モバイル開発（特にAndroidとFlutter）に関する質問に回答しています。ぜひフォローしてみてください。