React-native-keyboard-aware-scroll-view: Dismissing keyboard after scrolling to a focused text input leaves empty space on top

Created on 12 Mar 2020 · 2Comments · Source: APSL/react-native-keyboard-aware-scroll-view

This issue is also related to #289, which is closed and seems to not be getting any attention, however this issue still persists.

When a text input is focused, the scrollview correctly scrolls to the focused text input field, however tapping outside the textInput and dismissing the keyboard will result in white space above the scrollview.

I think the issue is caused by Keyboard avoiding view wrapping around the components.

   <KeyboardAvodingView behavior="padding", keyboardVerticaloffset={50} style={{flex:1}}>
      <KeyboardAwareScrollView
        ref={scrollView}
        keyboardShouldPersistTaps="handled"
        contentContainerStyle={{flexGrow:1}}
      >
        <TextInput
          ref={() => textInputRef}
          onFocus={event => {
            scrollView.current.scrollToFocusedInput(findNodeHandle(event.target));
          }}
          onBlur={() => scrollView.current.scrollToPosition(0, 0)}
          style={styles.textInputStyle}
          onChangeText={({ value }) => onAnswerChange({ value})}
          value={answer}
          multiline
        />
     </KeyboardAwareScrollView>
      {* Just a view with some buttons that I want to still be visible above the keyboard*}
     <View>
       <Button/>
       <Button/>
    </View>
  </KeyboardAvodingView>

I have also tried to use the following props on the KeyboardAwareScrollView, but without any success:

      resetScrollToCoords={{ y: 0, x: 0 }}
      extraScrollHeight={offset}
      onKeyboardWillShow={() => setOffset(200)}
      onKeyboardWillHide={() => setOffset(0)}

Source