Modal (오버레이 화면 직접 제작)

Tags
modal
Column

공식문서

https://reactnative.dev/docs/modal
 

구현 영상

 

예시 코드 작성

  • ModalTest.js (별도 컴포넌트로 작성함)
import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  Modal,
  TouchableOpacity,
  StyleSheet,
  TouchableWithoutFeedback
} from 'react-native';
import * as Animatable from 'react-native-animatable';

export default function RenewModal({
  modalVisible = false,
  onModalClose = () => {}
}) {
  console.log('registeredDevices : ', registeredDevices);
  return (
    <>
      {/* 보여질 모달 */}
      <Modal animationType="fade" transparent={true} visible={modalVisible}>
        <TouchableWithoutFeedback onPress={onModalClose}>
          <View
            style={{
              flex: 1,
              justifyContent: 'center',
              backgroundColor: 'rgba(0,0,0,0.8)'
            }}
          >
            <TouchableWithoutFeedback onPress={() => {}}>
              <Animatable.View animation="rubberBand" style={styles.modalView}>
                <Text style={styles.modalText}>Hello World!</Text>

                <TouchableOpacity
                  style={{ ...styles.openButton, backgroundColor: '#000' }}
                  onPress={onModalClose}
                >
                  <Text style={styles.textStyle}>Hide Modal</Text>
                </TouchableOpacity>
              </Animatable.View>
            </TouchableWithoutFeedback>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  //팝업될 모달 스타일
  modalView: {
    margin: 10,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 15,
    // alignItems: 'center',

    //모달 그림자 설정
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 1,
        shadowRadius: 5
      },
      android: {
        elevation: 5
      }
    })
  },

  //버튼
  openButton: {
    backgroundColor: '#000',
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },

  //버튼 안의 텍스트
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center'
  },

  //모달 안의 텍스트
  modalText: {
    marginBottom: 15,
    textAlign: 'center'
  }
});