모달

화면 전체를 덮고 있는 오버레이 스크린

모달 화면 추가하기

import { Modal } from "react-native";

모달 화면에 추가하고 싶은 부분을 Modal 태그로 묶어주면 된다.

<Modal>
  <View style={styles.inputContainer}>
    <TextInput
               style={styles.textInput}
               placeholder="Your course goal!"
               onChangeText={goalInputHandler}
               value={enteredGoalText}
               />
    <Button title="Add Goal" onPress={addGoalHandler} />
  </View>
</Modal>

모달 열기

상태를 사용해서 모달이 보이거나 혹은 안 보이게 해야 한다.

App.js

import { Modal } from "react-native";

const [modalIsVisible, setModalIsVisible] = useState(false);

모달이 처음부터 뜨지 않도록 useState의 초깃값을 false로 설정한다.

<Button
  title="Add New Goal"
  color="#5e0acc"
  onPress={startAddGoalHandler}
/>

그리고 버튼을 부를때마다 상태가 바뀌도록 만든다.

{ modalIsVisible && <GoalInput onAddGoal={addGoalHandler} />

true 일때만 모달창이 보이게 하려면 GoalInput을 조건부 렌더링해야 한다.

모달 닫기

App 컴포넌트의 가시성 상태를 변화시켜야 한다.

App.js

  //모달을 닫는 함수
  function endAddGoalHandler() {
    setModalIsVisible(false);
  }

Goal이 추가된 상태에서 Add Goal 버튼이나 취소 버튼을 눌러 모달을 닫으려면 언제든 endAddGoalHandler가 실행되어야 하기 때문에, addGoalHandler에 e

GoalInput.js

<Button title='Cancel' onPress={props.onCancel} />

App.js

<GoalInput
  visible={modalIsVisible}
  onAddGoal={addGoalHandler}
  onCancel={endAddGoalHandler}
  />