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.

Sign up for GitHub

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: inverted list padding #668

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix: inverted list padding #668

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e031165
fix: inverted list padding
Oct 30, 2024
c38af54
fix: suggestions
lpatrun Dec 13, 2024
ec98ab2
fix: rest style
lpatrun Dec 15, 2024
74e5a63
fix: typing for rest styles
lpatrun Dec 15, 2024
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
40 changes: 24 additions & 16 deletions src/components/KeyboardAwareScrollView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,12 @@ const KeyboardAwareScrollView = forwardRef<

const { height } = useWindowDimensions();

const restStyle = (Array.isArray(rest.style) && rest.style?.[0]) || {};
const scaleStyle =
"transform" in restStyle &&
(restStyle?.transform?.[0] as { scale?: number });
const inverted = (scaleStyle && scaleStyle?.scale === -1) || false;

Comment on lines +116 to +121
Copy link
Owner

Choose a reason for hiding this comment

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

Ideally I would create a function isInverted (should be a pure function), I think you can put it in utils

And I would add useMemo here to avoid expensive checks 🤔

So the code should be:

const inverted = useMemo(() => isInverted(rest.style), [rest.style]);

What do you think?

Copy link
Owner

Choose a reason for hiding this comment

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

@lpatrun just a friendly ping 👋

const onRef = useCallback((assignedRef: Reanimated.ScrollView) => {
if (typeof ref === "function") {
ref(assignedRef);
Expand Down Expand Up @@ -348,21 +354,22 @@ const KeyboardAwareScrollView = forwardRef<
[],
);

const view = useAnimatedStyle(
() =>
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,
}
: {},
[enabled],
);
const view = useAnimatedStyle(() => {
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 + 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.

Still a question about negative extraKeyboardSpace and 0 otherwise 🤔

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

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

return (
<ScrollViewComponent
Expand All @@ -371,8 +378,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