APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.24k stars 643 forks source link

fix: auto-scroll height issue #477

Open zzAlexzz opened 3 years ago

zzAlexzz commented 3 years ago

Description

Explanation

additionalOffset in scrollResponderScrollNativeHandleToKeyboard means scroll view's bottom "contentInset"

https://github.com/facebook/react-native/blob/4cc3aa851c181032e8ea441f0cea6459c018c1d8/Libraries/Components/ScrollView/ScrollView.js#L986

/**
   * This method should be used as the callback to onFocus in a TextInputs'
   * parent view. Note that any module using this mixin needs to return
   * the parent view's ref in getScrollViewRef() in order to use this method.
   * @param {number} nodeHandle The TextInput node handle
   * @param {number} additionalOffset The scroll view's bottom "contentInset".
   *        Default is 0.
   * @param {bool} preventNegativeScrolling Whether to allow pulling the content
   *        down to make it meet the keyboard's top. Default is false.
   */
  scrollResponderScrollNativeHandleToKeyboard: <T>(
    nodeHandle: number | React.ElementRef<HostComponent<T>>,
    additionalOffset?: number,
    preventNegativeScrollOffset?: boolean,
  ) => void = <T>(){}

In react-native-keyboard-aware-scroll-view's KeyboardAwareHOC.js, contentInset's bottom is this.state.keyboardSpace

<ScrollableComponent
  {...refProps}
  keyboardDismissMode='interactive'
  contentInset={{ bottom: this.state.keyboardSpace }}

that's why we should pass (this.state.keyboardSpace - extraHeight) to scrollResponderScrollNativeHandleToKeyboard rather than extraHeight

https://github.com/APSL/react-native-keyboard-aware-scroll-view/blob/6cbf7b861856467892cef620adf9af46c4603fa8/lib/KeyboardAwareHOC.js#L307

const additionalOffset = this.state.keyboardSpace - extraHeight
  responder &&
    responder.scrollResponderScrollNativeHandleToKeyboard(
      reactNode,
      additionalOffset,
      true
    )

Screenshots

After Before
App 1 2
zzAlexzz commented 3 years ago

Node version need to be upgraded in CI as per https://github.com/APSL/react-native-keyboard-aware-scroll-view/pull/470