Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: auto-scroll height issue #477

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

zzAlexzz
Copy link

Description

  • fix issue by passing contentInset's bottom number
    • change additionalOffset as (this.state.keyboardSpace - extraHeight) in function scrollResponderScrollNativeHandleToKeyboard()

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

responder.scrollResponderScrollNativeHandleToKeyboard(

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

Screenshots

After Before
App 1 2

- fix issue by passing contentInset's bottom number
@zzAlexzz
Copy link
Author

Node version need to be upgraded in CI as per #470

Copy link

@Damoness Damoness left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants