Skip to content
Open
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,9 @@ const KeyboardAwareScrollView = forwardRef<

const { height } = useWindowDimensions();

const restStyle = (rest?.style?.[0] || {})
const inverted = "transform" in restStyle ? restStyle.transform[0]?.scale === -1 : false

const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
if (typeof ref === "function") {
ref(assignedRef);
Expand Down Expand Up @@ -349,18 +352,20 @@ const KeyboardAwareScrollView = forwardRef<
);

const view = useAnimatedStyle(
() =>
enabled
() => {
const invertedOffset = inverted ? -extraKeyboardSpace : 0;
return enabled
? {
// animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused)
// this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
// by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
// from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
// re-calculation on every animation frame and it helps to achieve smooth animation.
// see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
paddingBottom: currentKeyboardFrameHeight.value + 1,
paddingBottom: currentKeyboardFrameHeight.value + invertedOffset + 1,
Copy link
Owner

Choose a reason for hiding this comment

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

Why in case of inverted we do need to remove extraKeyboardSpace?

}
: {},
: {}
},
[enabled],
);

Expand All @@ -371,8 +376,9 @@ const KeyboardAwareScrollView = forwardRef<
scrollEventThrottle={16}
onLayout={onScrollViewLayout}
>
{inverted ? <Reanimated.View style={view} /> : null}
{children}
<Reanimated.View style={view} />
{!inverted ? <Reanimated.View style={view} /> : null}
</ScrollViewComponent>
);
},
Expand Down
Loading