Modal 창 띄우기(React-native modal)

오늘 하루 종일 modal 창 띄우는데 시간을 보냈다..
첨엔 어떻게 띄워야될까...계속 고민하던 찰나 react-native docs component에서
modal을 발견했고 바로 응용을 해봤다.

import React from "react";
import {View, StyleSheet, Text, Modal, Button} from 'react-native';

export default function SignUpModal({
    modalVisible,
    closeModal,
}){

    return(
     <Modal visible={modalVisible}
     animationType = "slide">
        <View style = {styles.modalView}>

            <View style = {styles.container01}>
                <Text>연습1</Text>
            </View>
            <View style = {styles.container01}>
                <Text>연습1</Text>
            </View>
            <View style = {styles.container01}>
                <Text>연습1</Text>
            </View>
            <View style = {styles.container01}>
                <Text>연습1</Text>
            </View>

            <Button onPress={closeModal} title='close'/>

        </View>
    </Modal>
    )

}

먼저 modal로 띄울 modal 창을 만들어 준 후,

const [modalVisible, setModalVisible] = useState(false);

    const openModal = () => {
        setModalVisible(true)
    }

    const closeModal = () => {
        setModalVisible(false)
    }

각각 modal을 띄우고 닫는 함수를 만들어 줬다.

return(
        <View style={styles.container}>

            <View style={styles.container01}>
                <Button onPress={openModal} title='press' />
                <SignUpModal
                    modalVisible={modalVisible}
                    closeModal={closeModal} />

            </View>

        </View>
        
    );
    ```
    
    버튼 클릭 시 띄울 modal 창을 넣고, Button에 openModal을 넣어줘 클릭 시 modal 창이 활성화되는데 성공!