Skip to content

fix: inverted list padding #668

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

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

fix: inverted list padding #668

Changes from 1 commit
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
19 changes: 14 additions & 5 deletions src/components/KeyboardAwareScrollView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export type KeyboardAwareScrollViewProps = {
enabled?: boolean;
/** Adjusting the bottom spacing of KeyboardAwareScrollView. Default is `0` */
extraKeyboardSpace?: number;
/** Used if inverted Flatlist/Flashlist is being used */
inverted?: boolean;
Copy link
Owner

@kirillzyusko kirillzyusko Oct 30, 2024

Choose a reason for hiding this comment

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

I think this property can be derived from style property?

style?.transform?.some(({scaleY}) => scaleY === -1);

Copy link
Author

@lpatrun lpatrun Oct 30, 2024

Choose a reason for hiding this comment

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

Maybe I am missing how to call style, but when I call it as is in the component, I get

"Cannot find name 'style'."

and in rest.style I have only
"style": {"backgroundColor": "#FFFFFF", "flex": 1}} so ni scaleY.

But this inverted prop should be ok because it is a Flatlist/Flashlist prop. Right?

Copy link
Owner

@kirillzyusko kirillzyusko Oct 30, 2024

Choose a reason for hiding this comment

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

@lpatrun can you show me how do you use FlatList and KeyboardAwareScrollView?

I assumed it would be something like that:

<FlatList
  data={[]}
  renderItem={() => <></>}
  inverted
  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
/>

And here (if I understand correctly) props.style should contain transform property (it should be injected by FlatList). Or no? 🙈

Copy link
Author

@lpatrun lpatrun Oct 30, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This is the code from the app

 <FlatList
   contentContainerStyle={styles.dataStyles}
   data={[...messages].reverse()}
   inverted
   renderItem={({ item }) => renderChatElement(item)}
   ItemSeparatorComponent={() => <SpacingComponent val={4} />}
   renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
   ListHeaderComponent={() => (isLoading ? <Loading /> : <></>)}
/>

Copy link
Owner

@kirillzyusko kirillzyusko Oct 30, 2024

Choose a reason for hiding this comment

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

Thanks @lpatrun

I'll check it today! ❤️

Copy link
Owner

@kirillzyusko kirillzyusko Oct 31, 2024

Choose a reason for hiding this comment

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

Hi @lpatrun

I added this code to KeyboardAwareScrollView (it has TS errors):

    const inverted = Array.isArray(rest.style)
      ? rest.style?.[0]?.transform[0]?.scaleY === -1
      : false;

    console.log("rest", rest.style, inverted);

And this code I used for testing:

    <FlatList
      // contentContainerStyle={{flex: 1}}
      // style={{flexGrow: 1}}
      data={[1]}
      inverted
      renderItem={({ item }) => <></>}
      renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
  />

And it seems to work fine:

image

Can you check on your side again?

/** Ajdusting the offset for the content when keyboard is shown on inverted Flatlist/Flashlist on screen with BottomTab navigation */
tabBarHeight?: number;
/** Custom component for `ScrollView`. Default is `ScrollView` */
ScrollViewComponent?: React.ComponentType<ScrollViewProps>;
} & ScrollViewProps;
Expand Down Expand Up @@ -94,6 +98,8 @@ const KeyboardAwareScrollView = forwardRef<
extraKeyboardSpace = 0,
ScrollViewComponent = Reanimated.ScrollView,
snapToOffsets,
inverted = false,
tabBarHeight = 0,
...rest
},
ref,
Expand Down Expand Up @@ -349,18 +355,20 @@ const KeyboardAwareScrollView = forwardRef<
);

const view = useAnimatedStyle(
() =>
enabled
() => {
const invertedOffset = inverted ? -tabBarHeight : 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

@kirillzyusko kirillzyusko Dec 13, 2024

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 +379,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