-
-
Notifications
You must be signed in to change notification settings - Fork 119
Description
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
.