📚[RㆍN] Modal 제대로 쓰자 !

🔊 react-native-modal 기능을 알아보기!🪄

• 백드롭(바깥 영역) 눌러서 닫기
• 스와이프해서 닫기(제스처)
• 더 부드러운 애니메이션 / 백드롭 애니메이션
• 위치 조절 / 키보드 대응

같은 자주 쓰는 UX를 만들려면 코드가 길어지기 쉬워요.

그래서 오늘은 react-native-modal이 제공하는 기능에 대해서 정리해보려합니다!

먼저, RN 공식 Modal 예시 (기본 Modal)

React Native 공식 문서에 있는 예시 코드를 보면 이런 느낌이죠.

• animationType="slide" 로 등장 방식 제어
• transparent 로 배경 투명 처리
• visible 상태로 열고 닫기

(이 방식도 충분히 좋지만, 디테일한 UX를 추가할 때 코드가 점점 길어집니다.)

react-native-modal을 쓰는 이유

react-native-modal은 RN 기본 Modal을 감싸서 모달 UX를 쉽게 확장해주는 라이브러리예요.

특히 이런 기능이 편합니다.

• ✅ 백드롭 탭으로 닫기 (onBackdropPress)
• ✅ 스와이프 닫기 (swipeDirection, onSwipeComplete)
• ✅ 애니메이션 종류 선택 (animationIn, animationOut)
• ✅ 백드롭 애니메이션/투명도 (backdropOpacity)
• ✅ 키보드 올라올 때 밀려나게 처리 (avoidKeyboard)
• ✅ 안전하게 닫힘 처리 콜백 (onModalHide)

설치

npm i react-native-modal
# 또는
yarn add react-native-modal

우리가 구현할 “꼭 필요한 모달” 기능

오늘 만들 모달 스펙은 딱 이 정도만!

• 열기 / 닫기 (state)
• 백드롭(배경) 눌러서 닫기
• 안드로이드 뒤로가기 버튼으로 닫기
• 아래로 스와이프해서 닫기 (제스처)
• 부드러운 등장/퇴장 애니메이션

✅ 최소 코드로 실전 모달 만들기 (BackDrop + Swipe)

아래 코드는 “필요한 기능만” 골라서 넣은, 가장 실전형 기본 템플릿이에요.

import React, {useState} from 'react';
import {Alert, Modal, StyleSheet, Text, Pressable, View} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

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

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
            setModalVisible(!modalVisible);
          }}>
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>
              <Pressable
                style={[styles.button, styles.buttonClose]}
                onPress={() => setModalVisible(!modalVisible)}>
                <Text style={styles.textStyle}>Hide Modal</Text>
              </Pressable>
            </View>
          </View>
        </Modal>

        <Pressable
          style={[styles.button, styles.buttonOpen]}
          onPress={() => setModalVisible(true)}>
          <Text style={styles.textStyle}>Show Modal</Text>
        </Pressable>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  buttonOpen: { backgroundColor: '#F194FF' },
  buttonClose: { backgroundColor: '#2196F3' },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

export default App;

🧩 Modal 옵션 정리 (React Native Modal + react-native-modal)

아래는 “이 글의 목적(가볍게 필요한 기능만)”에 맞춰, 자주 쓰는 옵션만 플랫폼별로 정리한 내용입니다.

✅ 공통 (iOS / Android)

🔹 React Native Modal

1) animationType

모달이 어떤 애니메이션으로 등장할지 제어

<Modal animationType="slide" />

• slide → 아래에서 위로 등장
• fade → 서서히 나타남
• none → 애니메이션 없음

2) transparent

모달 배경 투명 여부

<Modal transparent />

• true → 배경 투명 (커스텀 백드롭 필요)
• false → 기본 흰색 배경

3) onRequestClose

모달이 닫히려고 할 때 호출되는 콜백

<Modal onRequestClose={() => setVisible(false)} />

• Android: 하드웨어 뒤로가기 버튼
• iOS: 드래그 제스처
• Android에서는 필수 구현 권장

4) onShow

모달이 화면에 표시된 직후 호출

<Modal onShow={() => console.log('opened')} />

• 로깅, analytics, focus 처리 등에 활용

🔹 react-native-modal

5) isVisible

모달 열림 / 닫힘 상태

<Modal isVisible={visible} />

6) onBackdropPress

모달 바깥 영역(백드롭)을 눌러 닫기

<Modal onBackdropPress={() => setVisible(false)} />

7) backdropOpacity

백드롭 투명도(어두운 정도)

<Modal backdropOpacity={0.4} />

8) animationIn / animationOut

등장 / 퇴장 애니메이션 설정

<Modal animationIn="slideInUp" animationOut="slideOutDown" />

9) useNativeDriver

애니메이션 성능 최적화 옵션

<Modal useNativeDriver />

🍎 iOS 전용

🔹 React Native Modal

10) onDismiss

모달이 완전히 닫힌 후 호출

<Modal onDismiss={() => console.log('closed')} />

• 닫힘 애니메이션 종료 후 실행

11) onOrientationChange

모달이 떠 있는 동안 화면 방향 변경 감지

<Modal
  onOrientationChange={(event) => {
    console.log(event.orientation);
  }}
/>

• "portrait" → 세로
• "landscape" → 가로

12) allowSwipeDismissal

아래로 스와이프해서 모달 닫기 허용 여부

<Modal allowSwipeDismissal />

• iOS 전용
• 기본 Modal에서만 제공

🔹 react-native-modal

13) swipeDirection

스와이프로 모달 닫기 (제스처)

<Modal swipeDirection="down" />

• "down" | "up" | "left" | "right"
• 배열도 가능: ["down", "left"]

14) onSwipeComplete

스와이프가 완료됐을 때 호출되는 콜백

<Modal onSwipeComplete={() => setVisible(false)} />

🤖 Android 전용

🔹 React Native Modal

15) hardwareAccelerated

모달을 GPU 렌더링으로 강제

<Modal hardwareAccelerated />

• 투명 View + 애니메이션 시 발생하는

  • 검은 화면
  • 깜빡임
  • 렌더링 오류
    방지 목적

• Android 전용 (iOS 무시)

16) statusBarTranslucent

모달이 상태바 영역 아래까지 확장될지 여부

<Modal statusBarTranslucent />

• true → 상태바까지 덮음
• false → 상태바 아래부터 표시
• Android 10+ 이상 권장

마무리

React Native 기본 Modal만으로도 구현은 가능하지만,
백드롭 탭 / 스와이프 닫기 / 자연스러운 애니메이션 같은 UX를 구현하려면
추가 구현이 많이 필요해요.

react-native-modal을 사용하면 필요한 기능만 골라
더 간결하게 실전 모달을 만들 수 있습니다.

+뒤 포스트에서 더욱 다채로운 기능이 추가하여 가볍게 modal을 사용하는 법도 읽어보세요 ! 😊

---