keypad에 input이 가려지지 않으려면...?
시도1) KeyboardAvoidingView 사용
KeyboardAvoidingView를 사용해보았지만..
현재 화면에는 적절하지 않은 방법인거 같다 ㅎㅎㅎㅎ...
<KeyboardAvoidingView
behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
style={{ flex: 1 }}
keyboardVerticalOffset={500}
>
<PageWrap>
<FormBox>
<InputTitle>프로젝트 이름</InputTitle>
<InputTextStyle placeholder="프로젝트 이름" />
</FormBox>
{/* {----------- 생략 -----------} */}
</PageWrap>
</KeyboardAvoidingView>시도2) react-native-keyboard-aware-scroll-view
해당 라이브러리의 npm 문서를 보니.. 이런 글이..!
TextInput 구성 요소에 대한 자동 스크롤..!!
포커스되어 있는 TextInput으로 KeyboardAwareScrollView가 자동으로 스크롤 되도록 하려면
1. getTextInputRefs라는 속성을 추가하고,
2. 자동 스크롤되는 TextInput 구성 요소에 대한 참조 배열을 반환 할 수있는 콜백 처리한다.
3. KeyboardAwareScrollView는 배열에서 포커스가있는 TextInput을 찾고 해당 위치로 스크롤하여 표시되는지 확인한다.
오.. 그런데 v0.1.0부터 구성 요소는 포커스가있는 텍스트 입력으로 자동 스크롤 된다고 나와있다.. 오...
이렇게하니 더이상 키패드에 인풋이 가려지지 않는다..!!
<KeyboardAwareScrollView>
<FormBoxComponent
title="프로젝트 이름"
placeholder="프로젝트 이름"
values={formik.values.projectName}
handleChange={formik.handleChange('projectName')}
/>
<FormBoxComponent
title="프로젝트 설명"
placeholder="프로젝트 설명"
blurOnSubmit={true}
multiline={true}
values={formik.values.projectDescription}
handleChange={formik.handleChange('projectDescription')}
/>
</KeyboardAwareScrollView>
된다...!! 더이상 키패드에 인풋이 가려지지 않는다.. 감동...😂
참고블로그
👩🏻💻 🚀