expo 모달 사용해보기

오늘은 모달을 사용해봅시다.

 

모달 · 네이티브 반응 (reactnative.dev)

Modal · React Native

여기에 잘 나와있어용!

 

저는 따로 빼서 base모달을 만들어뒀습니다,

 

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

interface BaseModalProps {
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode;
}

export default function BaseModal({
  isOpen,
  onClose,
  children,
}: BaseModalProps) {
  return (
    <View>
      <Modal
        animationType="slide"
        transparent={true}
        visible={isOpen}
        onRequestClose={onClose}
      >
        <View style={styles.overlay}>{children}</View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
});

 

Modal 부분만 봅시다. 

 

1. animationType은 3가지('none','slide','fade')의 옵션이 있네요.
2. onRequestClose는 뒤로가기 버튼을 클릭했을 때 실행.
3. transparent 전체를 채울지 결정.
4. visible 모달을 보여줄지 결정.

다음은 카테고리 모달을 만들었습니다.

 

일단 간단하게만 만들어봅시다.

 

import { Pressable, StyleSheet, Text, View } from "react-native";
import React from "react";
import BaseModal from "./BaseModal";
import playStore from "../../stores/playstore";
import { BASE_COLOR } from "../../constants/color";

export default function CategoryModal() {
  const { modalVisible, setModalVisible, categoryName } = playStore();
  const onClose = () => {
    setModalVisible(!modalVisible);
  };

  return (
    <BaseModal isOpen={modalVisible} onClose={onClose}>
      <View style={styles.container}>
        <Pressable style={styles.closeButton} onPress={onClose}>
          <Text style={styles.closeText}>X</Text>
        </Pressable>
        <Text style={styles.title}>{categoryName}</Text>
        <View style={styles.buttonList}>
          <Pressable
            style={styles.button}
            onPress={() => console.log("객관식")}
          >
            <Text style={styles.buttonText}>객관식</Text>
          </Pressable>
          <Pressable
            style={styles.button}
            onPress={() => console.log("주관식")}
          >
            <Text style={styles.buttonText}>주관식</Text>
          </Pressable>
        </View>
      </View>
    </BaseModal>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: BASE_COLOR.MEDIUM,
    alignItems: "center",
    paddingHorizontal: 50,
    paddingVertical: 50,
  },
  title: {
    marginTop: 20,
    fontSize: 30,
    color: BASE_COLOR.LIGHT_TEXT,
  },

  closeButton: {
    position: "absolute",
    right: 20,
    top: 20,
  },
  closeText: {
    fontSize: 20,
    color: BASE_COLOR.LIGHT_TEXT,
  },
  buttonList: {
    flexDirection: "row",
    gap: 50,
    marginVertical: 20,

    paddingTop: 50,
  },
  button: {
    backgroundColor: BASE_COLOR.LIGHT,
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  buttonText: {
    fontSize: 20,
  },
});

 

이렇게 해서 간단하게 동작하게 만들었습니다. 결과물을 볼게요!

 

 

짠~ 모달 같아보이죠? ㅎㅎ 

 

제가 디자인은 약하기에 디자인은 편한대로 해주시면 될 것 같아요~