From 306ca022c1777ef9835f44ff202295231140d675 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Thu, 3 Aug 2023 18:17:57 -0700
Subject: [PATCH] FlatList example fixes (#38739)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/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: eb022c01bfd7df44c2f11d03ccc4580270c36a65
---
 .../js/examples/FlatList/FlatList-basic.js     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
index 360540c61a2277..e10d1c4f3ecf60 100644
--- a/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
+++ b/packages/rn-tester/js/examples/FlatList/FlatList-basic.js
@@ -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
             }
@@ -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}
@@ -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: {