keyboard가 올라올 때 header에 이메일 input이 가려버리는 문제가 발생했다.
react-native-keyboard-aware-scroll-view-not-scrolling-on-android에 나온대로
react-native-keyboard-aware-scroll-view 에서 사용법에 언급한대로 Set windowSoftInputMode to adjustPan in AndroidManifest.xml.를 해주어야 한다.
<KeyboardAwareScrollView
extraHeight={300}
enableOnAndroid={true}
enableAutomaticScroll={Platform.OS === 'ios'}
contentContainerStyle={{ height: -30 }}
resetScrollToCoords={{ x: 0, y: 0 }}
scrollEnabled={true}
enableAutomaticScroll={true}
>
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.formLayout}>
<View style={styles.rowstyle}>
<Input
value={email}
onChangeText={onChangeEmail}
keyboardType={'email-address'}
autoCorrect={false}
autoFocus={true}
errorMessage={errorEmail}
leftIcon={{
type: 'antdesign',
name: 'user',
}}
placeholder="이메일"
ref={ref_input[0]}
onSubmitEditing={(text) => focusNext(0)}
autoCapitalize={'none'}
/>
<CloseButtonCoord>
{email && (
<AntDesign
name="closecircle"
color="grey"
size={16}
onPress={onResetEmail}
/>
)}
</CloseButtonCoord>
</View>
....
</View>
</TouchableWithoutFeedback>
</SafeAreaView>
</KeyboardAwareScrollView>
const styles = StyleSheet.create({
container: {
height: window.height * 1,
},
formLayout: {
padding: 24,
flex: 1,
justifyContent: 'center',
},
....
});
ps.
Programatically scroll to any TextInput을 react hooks로 사용하는 법은 다음을 참고했다
https://www.gitmemory.com/issue/APSL/react-native-keyboard-aware-scroll-view/451/739433103