Skip to content

Commit

Permalink
FlatList example fixes (#38739)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #38739

1. The separator here adds horizontal width, except when the cell is tapped. This is meant to be a visual effect for vertical FlatList, but makes `getItemLayout` incorrect and results in odd layout shifts. Do not use when horizontal.
2. Disabling "fixed height" leads to a barrage of errors because the example sets `initialScrollIndex` but does not set an `onScrollToIndexFailed` prop.

Changelog: [Internal]

Reviewed By: rozele

Differential Revision: D47978628

fbshipit-source-id: 708cae0600535f9eecd3ac422b93736edd80ba72
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Aug 3, 2023
1 parent a34ce64 commit 66948a5
Showing 1 changed file with 17 additions and 1 deletion.
18 changes: 17 additions & 1 deletion packages/rn-tester/js/examples/FlatList/FlatList-basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,9 @@ class FlatListExample extends React.PureComponent<Props, State> {
<SeparatorComponent />
<Animated.FlatList
fadingEdgeLength={this.state.fadingEdgeLength}
ItemSeparatorComponent={ItemSeparatorComponent}
ItemSeparatorComponent={
this.state.horizontal ? null : ItemSeparatorComponent
}
ListHeaderComponent={
this.state.previousLoading ? LoadingComponent : HeaderComponent
}
Expand Down Expand Up @@ -280,6 +282,7 @@ class FlatListExample extends React.PureComponent<Props, State> {
onScroll={
this.state.horizontal ? this._scrollSinkX : this._scrollSinkY
}
onScrollToIndexFailed={this._onScrollToIndexFailed}
onViewableItemsChanged={this._onViewableItemsChanged}
ref={this._captureRef}
refreshing={false}
Expand Down Expand Up @@ -369,6 +372,19 @@ class FlatListExample extends React.PureComponent<Props, State> {
}
: {renderItem: renderProp};
};

_onScrollToIndexFailed = ({
index,
highestMeasuredFrameIndex,
}: {
index: number,
highestMeasuredFrameIndex: number,
}) => {
console.warn(
`failed to scroll to index: ${index} (measured up to ${highestMeasuredFrameIndex})`,
);
};

// This is called when items change viewability by scrolling into or out of
// the viewable area.
_onViewableItemsChanged = (info: {
Expand Down

0 comments on commit 66948a5

Please sign in to comment.