KeyboardAwareScrollView에서 _scrollToInput 사용하기

Maliethy·2021년 3월 2일
0

1. issue

keyboard가 올라올 때 header에 이메일 input이 가려버리는 문제가 발생했다.

2. solution

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

profile
바꿀 수 있는 것에 주목하자

0개의 댓글