patch react-native to support outside header offset in virtualized list
This commit is contained in:
@@ -0,0 +1,48 @@
|
|||||||
|
diff --git a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.d.ts b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.d.ts
|
||||||
|
index a4c93f5..7157d5b 100644
|
||||||
|
--- a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.d.ts
|
||||||
|
+++ b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.d.ts
|
||||||
|
@@ -390,4 +390,6 @@ export interface VirtualizedListWithoutRenderItemProps<ItemT>
|
||||||
|
| React.ComponentType<CellRendererProps<ItemT>>
|
||||||
|
| null
|
||||||
|
| undefined;
|
||||||
|
+
|
||||||
|
+ outsideHeaderOffset?: number | undefined;
|
||||||
|
}
|
||||||
|
diff --git a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
|
||||||
|
index 9f95091..db57032 100644
|
||||||
|
--- a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
|
||||||
|
+++ b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList.js
|
||||||
|
@@ -1948,9 +1948,18 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._viewabilityTuples.forEach(tuple => {
|
||||||
|
+ // HACK
|
||||||
|
+ // Becuase our pager with header adds a header _outside_ of the VirtualizedList, the scroll metric offset dosn't
|
||||||
|
+ // know about it, and the offset provided here is inaccurate. We are able to pass in this value to the VL, and can
|
||||||
|
+ // adjust hte offset here to account for that header.
|
||||||
|
+ let adjustedOffset = this._scrollMetrics.offset;
|
||||||
|
+ if (this.props.outsideHeaderOffset) {
|
||||||
|
+ adjustedOffset -= this.props.outsideHeaderOffset;
|
||||||
|
+ }
|
||||||
|
+
|
||||||
|
tuple.viewabilityHelper.onUpdate(
|
||||||
|
props,
|
||||||
|
- this._scrollMetrics.offset,
|
||||||
|
+ adjustedOffset,
|
||||||
|
this._scrollMetrics.visibleLength,
|
||||||
|
this._listMetrics,
|
||||||
|
this._createViewToken,
|
||||||
|
diff --git a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedListProps.js b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedListProps.js
|
||||||
|
index 1a956ea..2190e4f 100644
|
||||||
|
--- a/node_modules/@react-native/virtualized-lists/Lists/VirtualizedListProps.js
|
||||||
|
+++ b/node_modules/@react-native/virtualized-lists/Lists/VirtualizedListProps.js
|
||||||
|
@@ -285,6 +285,8 @@ type OptionalProps = {|
|
||||||
|
* The legacy implementation is no longer supported.
|
||||||
|
*/
|
||||||
|
legacyImplementation?: empty,
|
||||||
|
+
|
||||||
|
+ outsideHeaderOffset?: ?number,
|
||||||
|
|};
|
||||||
|
|
||||||
|
export type Props = {|
|
||||||
@@ -79,6 +79,7 @@ export const ProfileFeedSection = React.forwardRef<
|
|||||||
headerOffset={headerHeight}
|
headerOffset={headerHeight}
|
||||||
renderEndOfFeed={ProfileEndOfFeed}
|
renderEndOfFeed={ProfileEndOfFeed}
|
||||||
ignoreFilterFor={ignoreFilterFor}
|
ignoreFilterFor={ignoreFilterFor}
|
||||||
|
outsideHeaderOffset={headerHeight}
|
||||||
/>
|
/>
|
||||||
{(isScrolledDown || hasNew) && (
|
{(isScrolledDown || hasNew) && (
|
||||||
<LoadLatestBtn
|
<LoadLatestBtn
|
||||||
|
|||||||
@@ -162,6 +162,7 @@ let Feed = ({
|
|||||||
ListHeaderComponent,
|
ListHeaderComponent,
|
||||||
extraData,
|
extraData,
|
||||||
savedFeedConfig,
|
savedFeedConfig,
|
||||||
|
outsideHeaderOffset,
|
||||||
}: {
|
}: {
|
||||||
feed: FeedDescriptor
|
feed: FeedDescriptor
|
||||||
feedParams?: FeedParams
|
feedParams?: FeedParams
|
||||||
@@ -181,6 +182,7 @@ let Feed = ({
|
|||||||
ListHeaderComponent?: () => JSX.Element
|
ListHeaderComponent?: () => JSX.Element
|
||||||
extraData?: any
|
extraData?: any
|
||||||
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
savedFeedConfig?: AppBskyActorDefs.SavedFeed
|
||||||
|
outsideHeaderOffset?: number
|
||||||
}): React.ReactNode => {
|
}): React.ReactNode => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
const {track} = useAnalytics()
|
const {track} = useAnalytics()
|
||||||
@@ -549,6 +551,7 @@ let Feed = ({
|
|||||||
initialNumToRender={initialNumToRender}
|
initialNumToRender={initialNumToRender}
|
||||||
windowSize={11}
|
windowSize={11}
|
||||||
onItemSeen={feedFeedback.onItemSeen}
|
onItemSeen={feedFeedback.onItemSeen}
|
||||||
|
outsideHeaderOffset={outsideHeaderOffset}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -93,6 +93,7 @@ function ListImpl<ItemT>(
|
|||||||
}
|
}
|
||||||
return [
|
return [
|
||||||
(info: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {
|
(info: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {
|
||||||
|
console.log(info.viewableItems[0])
|
||||||
for (const item of info.changed) {
|
for (const item of info.changed) {
|
||||||
if (item.isViewable) {
|
if (item.isViewable) {
|
||||||
onItemSeen(item.item)
|
onItemSeen(item.item)
|
||||||
@@ -101,7 +102,7 @@ function ListImpl<ItemT>(
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
itemVisiblePercentThreshold: 40,
|
itemVisiblePercentThreshold: 40,
|
||||||
minimumViewTime: 1.5e3,
|
minimumViewTime: 0,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}, [onItemSeen])
|
}, [onItemSeen])
|
||||||
|
|||||||
Reference in New Issue
Block a user