[React-Native] Modal

1. Modal이란?

새로운 창이 열리는 Popup과 다르게 화면 위에 다른 작은 창을 띄워 보여주는 기능이다.

2. Modal 사용하기

react-native의 내장 컴포넌트를 사용하면 쉽게 구현할 수 있다.

    <Modal visible={visible} animationType="slide">
      <View style={styles.inputContainer}>
        <Image
          style={styles.image}
          source={require("../assets/images/goal.png")}
        />
        <TextInput
          style={styles.textInput}
          placeholder="Your corse goal!"
          value={enteredGoalText}
          onChangeText={goalInputHandler}
        />
        <View style={styles.buttonContainer}>
          <View style={styles.button}>
            <Button
              title="Add Goal"
              onPress={addGoalHandlerChild}
              color={"#b180f0"}
            />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" onPress={onClose} color={"#f31282"} />
          </View>
        </View>
      </View>
    </Modal>

해당 코드처럼 Modal component를 사용하여 쉽게 구현할 수 있는데, 이때 Modal component에서 쓰이는 특별한 property들이 존재한다.

visible

modal의 표시 여부를 조절한다.
일반적으로 useState를 사용하여 상태를 관리한다.

• true: 화면에 표시 (dafault)
• false: 화면에 표시하지 않음

animationType

modal이 화면에 띄워질 때 애니메이션 효과를 줄 수 있다.

• none: 효과 없음 (default)
• slide: 아래에서 위로 올라오며 등장
• fade: 서서히 나타났다 서서히 사라짐

onShow

modal의 visible이 true가 될 때 호출될 함수를 전달할 수 있다.

transparent

modal이 전체 view를 채울지 결정한다.

• true: 투명한 배경 위에 modal이 렌더링된다.
• false: modal의 배경이 없이 흰색으로 채워진다. (default)

이 외의 property들은 공식홈페이지를 참고하자.
https://reactnative.dev/docs/modal