Works by

Ren's blog

アプリケーションバックエンド中心に書いていきます

【React Native】react-native-modalboxでネイティブアプリ上のモーダルを利用する

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-buttonreact-native-sliderもインストールします。

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

Demo

Basic Modal

f:id:rennnosukesann:20180605224326g:plain:w250

Position top

f:id:rennnosukesann:20180605224516g:plain:w250

Position bottom + backdrop + disable

f:id:rennnosukesann:20180605224634g:plain:w250

Position bottom + backdrop + slider

f:id:rennnosukesann:20180605224752g:plain:w250

Backdrop + backdropContent

f:id:rennnosukesann:20180605224922g:plain:w250

Position bottom + ScrollView

f:id:rennnosukesann:20180605225040g:plain:w250

Modal with keyboard support

f:id:rennnosukesann:20180605225449g:plain:w250

参考

github.com