[study] 키보드가 올라오면 TextInput이 가려지는 현상 해결 -KeyboardavoidingView -

useEffect(() => {            // 모달이 열릴 때마다 TextInput에 focus를 준다.

         if (modalVisible) {

           setTimeout(() => {

           textInputFocusRef.current?. focus();

           }, 100);         // 약간의 시간차가 있어야 TextInput에 focus가 먹힌다.

}}, [modalVisible]);

---

# 안드로이드 기기에서 모달창이 바깥인 경우 잘 보이지 않는 현상이 있다

 

    // 그럴 때는 모달창 밖으로 <KeyboardAvoidingView>를 위치하면 된다.\

 

    예)

    if (Platform.OS === "ios") {              // ios는 그대로

    return (

    <Modal animationType="fade" transparent={true} visible={modalVisible}>

                <KeyboardAvoidingView

                 behavior={Platform.OS === "ios"? "padding" : "height"}

                 style={{ flex: 1 }} >

                              <Content

                               textInputFocusRef={textInputFocusRef}

                               albumTitle={albumTitle}

                               setAlbumTitle={setAlbumTitle}

                              onSubmitEditing={onSubmitEditing}

                               onPressBackdrop={onPressBackdrop}

                            />

                 </KeyboardAvoidingView>

    </Modal>

    );

    } else if (Platform.OS==='android'){

    return (

    <KeyboardAvoidingView

                  behavior={Platform.OS === "ios"? "padding" : "height"}

                  style={{}}>

            <Modal animationType="fade" transparent={true} visible={modalVisible}>

              <Content

                textInputFocusRef={textInputFocusRef}

                albumTitle={albumTitle}

                setAlbumTitle={setAlbumTitle}

                onSubmitEditing={onSubmitEditing}

                onPressBackdrop={onPressBackdrop}

              />

            </Modal>

</KeyboardAvoidingView>

        );