Skip to content

KeyboardAwareScrollView: scroll only when needed #168

@MarceloPrado

Description

@MarceloPrado

Describe the bug
I'm trying to replicate the KeyboardAwareScrollView behavior fromreact-native-keyboard-aware-scroll-view. Using the KeyboardAwareScrollView found in /examples, I noticed the scroll view scrolls more than it needs to:

CleanShot.2023-06-06.at.09.27.54.mp4

Notice how once I press the input with the scroll begins here placeholder, it scrolls much further than it should. I'm trying to make the input align with my sticky action bar (it should be a fixed amount above the sticky bar).

Code snippet
I used the code from your examples folder, with one modification:

const maybeScroll = useWorkletCallback(
  (e: number) => {
    "worklet";

    const visibleRect = height - keyboardHeight.value;

    if (visibleRect - click.value <= extraScrollHeight) {
      fakeViewHeight.value = e;

      const interpolatedScrollTo = interpolate(
        e,
        [0, keyboardHeight.value],
        [
          0,
          keyboardHeight.value - (height - click.value) + extraScrollHeight,
        ]
      );
      const targetScrollY =
        Math.max(interpolatedScrollTo, 0) + scrollPosition.value;

      scrollTo(scrollViewAnimatedRef, 0, targetScrollY, false);
    } else {
      fakeViewHeight.value = 0;
    }
  },
  [extraScrollHeight]
);

I added an if/else branch that skips scrolling when the click wouldn't overlap with the keyboard + bottom offset. Now, I need to figure out the right interpolation math that causes the view to scroll only by the right/minimum amount.

note: extraScrollHeight is a prop, similar to your BOTTOM_OFFSET.

Let me know if I can help with more details! I believe this would be a great addition to the component, since it enables a more seamless migration from react-native-keyboard-aware-scroll-view.

Metadata

Metadata

Assignees

Labels

KeyboardAwareScrollView 📜Anything related to KeyboardAwareScrollView componentsponsor 💖Someone pays money for the issue to be resolved 💸📚 componentsAnything related to the exported components of this library

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions