내일배움캠프 4기 React 49일차(Modal)

몸살로 인해 강의를 제대로 수강하지 못했다.

Modal

react-native 의 modal 을 이용하여 만들었다.

visible 이 true 일때 보여지고 false 일때 사라진다.

action을 추가하여 animation 효과를 줄 수 있다.

import { Modal } from "react-native";

<Modal visible={isOpenSignUpModal} transparent animationType="slide">
      <Backdrop>
        <Dialog>
          <InputWrapper>
            <InputTitle>NickName</InputTitle>
            <SignUpInput
            //   value={modalTitle}
            //   onChangeText={(text) => setModalTitle(text)}
            />
            <InputTitle>ID</InputTitle>
            <SignUpInput
              value={modalTitle}
              onChangeText={(text) => setModalTitle(text)}
            />
            <InputTitle>Password</InputTitle>
            <SignUpInput
              value={modalContent}
              onChangeText={(text) => setModalContent(text)}
            />
            <InputTitle>Password</InputTitle>
            <SignUpInput
            //   value={modalContent}
            //   onChangeText={(text) => setModalContent(text)}
            />
          </InputWrapper>
          <Row style={{ justifyContent: "space-between" }}>
            <ModalBtn
              onPress={() => setIsOpenSignUpModal(false)}
              title="Cancel"
            />
            <ModalBtn
              disabled={!modalTitle || !modalContent}
              onPress={addReview}
              title="Sign Up"
            />
          </Row>
        </Dialog>
      </Backdrop>
    </Modal>