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.

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

Always sticky feature #534

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 7 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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "recyclerlistview",
"version": "3.0.4",
"version": "3.0.6",
"description": "The listview that you need and deserve. It was built for performance, uses cell recycling to achieve smooth scrolling.",
"main": "dist/reactnative/index.js",
"types": "dist/reactnative/index.d.ts",
Expand Down
5 changes: 5 additions & 0 deletions src/core/RecyclerListView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export interface RecyclerListViewProps {
scrollViewProps?: object;
applyWindowCorrection?: (offsetX: number, offsetY: number, windowCorrection: WindowCorrection) => void;
onItemLayout?: (index: number) => void;
onSizeChange?: (rlvDimension: Dimension, contentDimension: Dimension) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

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

You can use contentSizeChanged event of scrollview instead

Copy link
Collaborator

Choose a reason for hiding this comment

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

@naqvitalha does RLV's _onSizeChanged get called on content size change or just container size change?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@ananyachandra14 contentSizeChanged this gets called only for ScrollView container size has changed.
@naqvitalha We had to add this for any size change (RVL + ScrollView container).. and to know if the RLV is scrollable or not.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@manishPatwari can we add a callback for both RLV size change and content size change and force rerender in both?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This change is for the same. RLV change hight is computed in onSize itself.

Copy link
Collaborator

Choose a reason for hiding this comment

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

But I'm not sure if this will cover the scenario where our RLV size remains the same but we dynamically increase the widget heights so the RLV becomes scrollable. In that case the footer will always remain sticky. Correct me if I'm wrong.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It will cover that Ananya, RLV dimension is dependent on ScrollView. OnSizeChange, RLV dimension is computed.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@manishPatwari there are two components which can change here:

  • RLV layout size - which is the size of the container in which the content scrolls. This is the one which is covered by ScrollComponent's onSizeChanged and the changes for which have been added.
  • Content size - which is the size of the entire scrollable content. Check LayoutManager's getContentDimension.

Imo RLV should check and give a callback for scrollable state change any time either of the above two changes. StickyContainer should simply listen to this rather than determining on its own whether RLV is scrollable.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Done the changes.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Awesome, checking

}

export interface RecyclerListViewState {
Expand Down Expand Up @@ -483,6 +484,10 @@ export default class RecyclerListView<P extends RecyclerListViewProps, S extends
this._refreshViewability();
}
}

if (this.props.onSizeChange) {
this.props.onSizeChange(this.getRenderedSize(), this.getContentDimension());
}
}

private _initStateIfRequired(stack?: RenderStack): boolean {
Expand Down
26 changes: 17 additions & 9 deletions src/core/StickyContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
private _stickyHeaderRef: StickyHeader<StickyObjectProps> | null = null;
private _stickyFooterRef: StickyFooter<StickyObjectProps> | null = null;
private _visibleIndicesAll: number[] = [];
private _isRlvScrollable: boolean = true;
private _windowCorrection: WindowCorrection = {
startCorrection: 0, endCorrection: 0, windowShift: 0,
};
Expand Down Expand Up @@ -71,6 +72,7 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
onScroll: this._onScroll,
applyWindowCorrection: this._applyWindowCorrection,
rowRenderer: this._rlvRowRenderer,
onSizeChange: this.props.alwaysStickyFooter ? this._onSizeChange : undefined,
});
return (
<View style={this.props.style ? this.props.style : { flex: 1 }}>
Expand Down Expand Up @@ -102,28 +104,34 @@ export default class StickyContainer<P extends StickyContainerProps> extends Com
overrideRowRenderer={this.props.overrideRowRenderer}
renderContainer={this.props.renderStickyContainer}
getWindowCorrection={this._getCurrentWindowCorrection}
alwaysStickBottom = {this.props.alwaysStickyFooter} />
alwaysStickyFooter = {this.props.alwaysStickyFooter} />
) : null}
</View>
);
}

private _rlvRowRenderer = (type: string | number, data: any, index: number, extendedState?: object): JSX.Element | JSX.Element[] | null => {
if (this.props.alwaysStickyFooter) {
const rlvDimension: Dimension | undefined = this._getRLVRenderedSize();
const contentDimension: Dimension | undefined = this._getContentDimension();
let isScrollable = false;
if (rlvDimension && contentDimension) {
isScrollable = contentDimension.height > rlvDimension.height;
}
if (!isScrollable && this.props.stickyFooterIndices
&& index === this.props.stickyFooterIndices[0]) {
if (!this._isRlvScrollable && this.props.stickyFooterIndices
&& index === this.props.stickyFooterIndices[this.props.stickyFooterIndices.length - 1]) {
return null;
}
}
return this._rowRenderer(type, data, index, extendedState);
}

private _onSizeChange = (rlvDimension: Dimension, contentDimension: Dimension) => {
let isScrollable = this._isRlvScrollable;
if (rlvDimension && contentDimension) {
isScrollable = contentDimension.height > rlvDimension.height;
}
// In case of scrollable state change, we have to force render to current Sticky slots rendering.
if (this._recyclerRef && this._isRlvScrollable !== isScrollable) {
this._isRlvScrollable = isScrollable;
this._recyclerRef.forceRerender();
}
}

private _getRecyclerRef = (recycler: any) => {
this._recyclerRef = recycler as (RecyclerListView<RecyclerListViewProps, RecyclerListViewState> | undefined);
if (this.props.children.ref) {
Expand Down