react-native-modal

1. 라이브러리를 설치

npm install react-native-modal

2. 모달 구현

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

const MyComponent = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />

      <Modal isVisible={isModalVisible}>
        <View style={styles.modalContent}>
          <Text>TEXT</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
    alignItems: 'center',
  },
});

export default MyComponent;

<Modal isVisible={isModalVisible} backdropOpacity={0}>
     <AlbumPlus
          visible={isModalVisible}
          onClose={() => setIsModalVisible(false)}
          onAddAlbum={handleAddNewAlbum}
      />
</Modal>

<Modal></Modal> 안에 작성하면서 커스텀 모달을 만들면 된다.
첫 번째 코드처럼 한 파일 내에서 작성해도 되지만
보통 모달 폴더에 모달들을 모아두고 import 해서 사용하는게 코드가 더 깔끔하게 써진다.!

---

✅ 모달 커스터마이징 옵션

1. 애니메이션 관련 옵션
animationIn: 모달이 나타날 때 사용할 애니메이션 유형을 설정
예: "slideInUp", "bounceIn", "fadeIn", "zoomIn", 등.

animationOut: 모달이 사라질 때 사용할 애니메이션 유형을 설정
예: "slideOutDown", "bounceOut", "fadeOut", "zoomOut", 등.

animationInTiming: 모달이 나타날 때 애니메이션의 지속 시간(밀리초)을 설정

animationOutTiming: 모달이 사라질 때 애니메이션의 지속 시간(밀리초)을 설정

useNativeDriver: 애니메이션을 네이티브 드라이버를 사용하여 처리할지 여부를 설정 (true 또는 false)

---

2. 모달의 배경 관련 옵션
backdropColor: 모달 뒤에 나타나는 배경의 색상을 설정
예: "#000" (검정색)

backdropOpacity: 모달 뒤 배경의 불투명도를 설정 (0에서 1 사이의 값)

backdropTransitionInTiming: 배경이 나타날 때의 애니메이션 지속 시간을 설정

backdropTransitionOutTiming: 배경이 사라질 때의 애니메이션 지속 시간을 설정

---

3. 모달 위치 및 크기 조정 옵션
style: 모달의 스타일을 설정,모달의 크기, 위치 등을 조정
deviceWidth: 모달의 너비를 화면 크기에 맞게 설정할 때 사용
deviceHeight: 모달의 높이를 화면 크기에 맞게 설정할 때 사용

---

4. 제스처 및 동작 관련 옵션
onBackdropPress: 모달 외부(배경)를 터치했을 때 호출되는 함수. 주로 모달을 닫는 데 사용

onSwipeComplete: 모달을 스와이프하여 닫을 때 호출되는 함수.

swipeDirection: 모달을 스와이프하여 닫을 수 있는 방향을 설정. 예: "up", "down", "left", "right".

swipeThreshold: 스와이프 동작의 민감도를 설정

---

5. 기타 옵션

isVisible: 모달이 보이는지 여부를 설정(true 또는 false)

hasBackdrop: 배경을 사용할지 여부를 설정(true 또는 false)

avoidKeyboard: 모달이 키보드 위에 올라가도록 설정할지 여부를 설정 (true 또는 false)

coverScreen: 모달이 화면 전체를 덮을지 여부를 설정합 (true 또는 false)

propagateSwipe: 모달 내에서 스와이프 동작을 전달할지 여부를 설정 (true 또는 false)