[React Native] 재사용 가능한 Custom Modal 만들기 (feat. Reusable Custom Modal)

안녕하세요 Foma 입니다.

 

저번 글에 Modal에 대해서 알아 보았는데요. (안보신 분은 여기 에서 봐주세요!)

 

오늘은 재사용 가능한 커스텀 Modal을 만들어 보는 방법에 대해서 알아 보겠습니다.

 

바로 시작할게요~

---

Modal.tsx

 

가장 먼저 필요한 컴포넌트들을 import 해줍니다.

 

Modal을 import할 땐 커스텀 하는 Component Modal과 이름이 겹치므로 as를 이용해서 DefaultModal로 바꿔줍니다.

 

import { FunctionComponent, useState } from "react";
import { StyleSheet, View, Modal as DefaultModal, Button } from "react-native";

 

Modal Props

 

모달의 속성들을 정합니다.

 

1. activator

 

Custom Modal 컴포넌트를 생성할 때 화면에서 직접 동작할 함수를 커스텀 하도록 도와주는 속성입니다.

 

handlOpen 익명 함수를 이용하여 Open하는 함수를 작성할 수 있도록 합니다.

 

2. children

 

모달 뷰 안에 들어갈 화면을 나타낼 속성입니다.

 

type ModalProps = {
  activator?: FunctionComponent<{ handleOpen: () => void }>;
  children: React.ReactNode;
};

 

Modal

 

위에서 만든 ModalProps를 파라미터로 받는 Modal 함수를 만들어 줍니다.

 

visible 속성을 상태로 관리할 useState를 만들어 줍니다.

 

export function Modal({ activator: Activator, children }: ModalProps) {
  const [isVisible, setVisible] = useState(false);
  ...

 

View

 

DefaultModal로 속성을 원하는대로 커스텀합니다.

 

View 태그를 만들어 주고 children을 넣어줘 Modal을 사용하는 화면에서 커스텀 할 수 있도록 합니다.

 

Close 버튼을 만들어줘 해당 버튼을 누르면 Modal이 꺼지도록 구현합니다.

 

  return (
    <View>
      <DefaultModal
        visible={isVisible}
        ...
      >
        <View style={styles.contentView}>
          {children}
          <Button onPress={() => setVisible(false)} title="Close"></Button>
        </View>
      </DefaultModal>
	...
  );

 

Activator가 있다면 Modal을 띄우는 화면에서 handleOpen이 실행 되었다면 모달 화면이 뜰 수 있도록 합니다.

 

만약 존재 하지 않는다면 Open 버튼을 만들어 주고 눌렀을 때 모달 화면이 뜰 수 있도록 합니다.

 

      {Activator ? (
        <Activator handleOpen={() => setVisible(true)} />
      ) : (
        <Button onPress={() => setVisible(true)} title="Open"></Button>
      )}
    </View>

---

Screen.tsx

 

Modal을 띄울 화면에서 위에서 만든 Modal을 import 해줍니다.

 

import { Modal } from "../components/styled/Modal";

 

해당 화면에서 Modal을 만들고 activator에 원하는 버튼을 커스텀 해주고 해당 버튼을 눌렀을 떄 handleOpen이 실행될 수 있도록 합니다.

 

Modal 컴포넌트 태그 안에 Text를 children으로 넣어줍니다.

 

export default function Screen({ route }: Navigation) {
  return (
   ...
      <Modal
        activator={({ handleOpen }) => (
          <Button onPress={handleOpen} title="Open"></Button>
        )}
      >
        <Text>Hello This is a activator modal view</Text> //children
      </Modal>
	...

 

activator가 없이 Modal을 만들고 싶다면 아래와 같이 작성해 주면 됩니다.

 

      <Modal>
        <Text>Hello This is a modal view</Text>
      </Modal>

---

실행화면

 

 

---

Source Code

 

Modal.tsx

 

import { FunctionComponent, useState } from "react";
import { StyleSheet, View, Modal as DefaultModal, Button } from "react-native";

type ModalProps = {
  activator?: FunctionComponent<{ handleOpen: () => void }>;
  children: React.ReactNode;
};

export function Modal({ activator: Activator, children }: ModalProps) {
  const [isVisible, setVisible] = useState(false);

  return (
    <View>
      <DefaultModal
        visible={isVisible}
        transparent={false}
        animationType={"slide"}
      >
        <View style={styles.contentView}>
          {children}
          <Button onPress={() => setVisible(false)} title="Close"></Button>
        </View>
      </DefaultModal>
      {Activator ? (
        <Activator handleOpen={() => setVisible(true)} />
      ) : (
        <Button onPress={() => setVisible(true)} title="Open"></Button>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  contentView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

 

Screen.tsx

 

import { View, Text, StyleSheet, Button } from "react-native";
import { Modal } from "../components/styled/Modal";

export default function Screen() {
  return (
    <View style={styles.container}>
      <Modal
        activator={({ handleOpen }) => (
          <Button onPress={handleOpen} title="Open"></Button>
        )}
      >
        <Text>Hello This is a activator modal view</Text>
      </Modal>

      {/* <Modal>
        <Text>Hello This is a modal view</Text>
      </Modal> */}
    </View>
  );
}