React NativeのModal（モーダル）コンポーネントの使い方と動作を徹底解説

React NativeのModalコンポーネントは、既存のUIコンテンツの上に別のビューを重ねて表示するための機能です。ダイアログや確認画面、入力フォームなど、ユーザーの注意を引きたい場面でよく使われます。

Modalコンポーネントの基本形

Modalコンポーネントの最もシンプルな記述例は以下の通りです。

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("モーダルが閉じられました"); }}> ここにコンテンツを記述</Modal>

Modalを使用するには、まずreact-nativeからインポートします。

import { Modal } from "react-native";

Modalウィンドウの主なプロパティ

Modalウィンドウで利用できる基本プロパティは以下の通りです。

実践例：モーダルウィンドウの表示・非表示を切り替える

ここでは、実際にModalコンポーネントを使って、ボタン操作でモーダルを開閉するサンプルを紹介します。

まずはModalをインポートします。

import { Modal } from "react-native";

モーダルを表示する際には、animationTypeでアニメーションの種類を選べます。選択肢は「slide」「fade」「none」の3つです。以下の例では、テキストとボタンを含むシンプルなモーダルウィンドウをスライド表示しています。

<Modal
     animationType="slide"
     transparent={true}
     visible={isVisible}
  >
   <View style={styles.centeredView}>
     <View style={styles.myModal}>
        <Text style={styles.modalText}>モーダル表示テスト！</Text>
          <Button style={styles.modalButton} title="閉じる" onPress={() => {setModalVisiblility(false); }}/>
     </View>
  </View>
</Modal>

状態管理にはuseStateを使用

isVisible変数がvisibleプロパティに渡されます。初期値はfalseなので、デフォルトではモーダルウィンドウは表示されません。isVisibleは次のように初期化します。

const [isVisible, setModalVisiblility] = useState(false);

setModalVisiblilityを呼び出すことで、isVisible変数をtrue⇔falseで更新できます。

Modal内に配置した「閉じる」ボタンはsetModalVisiblility(false)を呼び出し、isVisibleがfalseになることでモーダルウィンドウが非表示になります。

一方、モーダルを表示するためには、<Modal>の外側にある「Click Me」ボタンでsetModalVisiblility(true)を呼び出します。

<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
  >
  <View style={styles.centeredView}>
     <View style={styles.myModal}>
        <Text style={styles.modalText}>モーダル表示テスト！</Text>
          <Button style={styles.modalButton} title="閉じる" onPress={() =>{setModalVisiblility(false); }}/>
          </View>
          </View>
        </Modal>
      <Button title="クリックしてね" onPress={() => {
        setModalVisiblility(true);
      }}
    />
</View>

完成版サンプルコード

以下が、モーダルウィンドウの表示／非表示を切り替える完全な動作コードです。

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
    const [isVisible, setModalVisiblility] = useState(false);
    return (
        <View style={styles.centeredView}>
            <Modal
               animationType="slide"
               transparent={true}
               visible={isVisible}
           >
           <View style={styles.centeredView}>
              <View style={styles.myModal}>
                 <Text style={styles.modalText}>モーダル表示テスト！</Text>
                    <Button style={styles.modalButton} title="閉じる" onPress={() =>{setModalVisiblility(false); }}/>
                    </View>
                 </View>
             </Modal>
            <Button title="クリックしてね" onPress={() => {
              setModalVisiblility(true);
           }}
          />
      </View>
    );
};
const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    myModal: {
        width:200,
        height:200,
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.30,
        shadowRadius: 4,
        elevation: 5
    },
    modalText: {
        marginBottom: 20,
        textAlign: "center"
    },
    modalButton: {
        marginBottom: 50,
    }
});
export default App;

実行結果

このコードを実行すると、「クリックしてね」ボタンをタップすると下からスライドしながら白いモーダルウィンドウが表示され、モーダル内の「閉じる」ボタンを押すと再び非表示になる動作が確認できます。