react-native-modalbox

github.com

react-native-modalboxはアニメーション付きモーダル表示を手軽に実装できるUIコンポーネントです。
モーダルは使えるシーンが多いので、表示の仕方でユーザー体験を向上させたいときに使うと良いかもしれません。
（細かいカスタマイズが必要なときは、結局自作になりそうですが。。。）

Usage

create-react-native-appでプロジェクトを作成し、作成したプロジェクト配下にreact-native-modalboxをインストールしていきます。

$ create-react-native-app react-native-modalbox-app
$ cd react-native-modalbox-app
$ npm install react-native-modalbox@latest --save

create-react-native-appのインストールはこちら。

Source

公式に一通りのモーダルが使用できるデモがあったので、早速いじっていきます

デモではボタンとスライダーコンポーネントを使用しているため、
react-native-buttonとreact-native-sliderもインストールします。

$ npm install --save react-native-button
$ npm install --save react-native-slider

Demo

Basic Modal

Position top

Position bottom + backdrop + disable

Position bottom + backdrop + slider

Backdrop + backdropContent

Position bottom + ScrollView

Modal with keyboard support

参考

github.com