From d1018616a51fc3fc19ed122a3110e733c5841669 Mon Sep 17 00:00:00 2001
From: zj-linjie <1378150147@qq.com>
Date: Sun, 1 Nov 2026 14:16:19 +0800
Subject: [PATCH] Reproduce inverted FlatList blank at rest on iOS 27 device
 (#59731)

---
 .../examples/Playground/RNTesterPlayground.js | 50 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
index 8e6b10479de7..8a68ac80c126 100644
--- a/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/rn-tester/js/examples/Playground/RNTesterPlayground.js
@@ -12,21 +12,67 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 import RNTesterText from '../../components/RNTesterText';
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {FlatList, StyleSheet, Switch, Text, View} from 'react-native';
+
+const ROWS: Array<{id: string, label: string}> = Array.from(
+  {length: 60},
+  (_, i) => ({id: String(i), label: `Row ${i}`}),
+);
 
 function Playground() {
+  const [inverted, setInverted] = React.useState<boolean>(true);
+
+  // Reproducer for #59731: with `inverted` on, this bare FlatList lays out
+  // (correct content size, scroll gestures work, scrollbar visible) but paints
+  // nothing at rest on a physical iOS 27 device with Fabric. Toggling the flag
+  // off renders the very same list immediately.
   return (
     <View style={styles.container}>
       <RNTesterText>
-        Edit "RNTesterPlayground.js" to change this file
+        {'Issue #59731: with "inverted" on, this FlatList shows nothing at '}
+        {'rest (it still scrolls and reports a correct content size). Turn '}
+        {'the switch off to render the same list.'}
       </RNTesterText>
+      <View style={styles.switchRow}>
+        <RNTesterText>inverted</RNTesterText>
+        <Switch value={inverted} onValueChange={setInverted} />
+      </View>
+      <View style={styles.listContainer}>
+        <FlatList
+          inverted={inverted}
+          data={ROWS}
+          keyExtractor={item => item.id}
+          renderItem={({item}) => <Text style={styles.row}>{item.label}</Text>}
+        />
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     padding: 10,
+    gap: 10,
+  },
+  switchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  listContainer: {
+    flex: 1,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#999999',
+  },
+  row: {
+    padding: 12,
+    marginHorizontal: 10,
+    marginVertical: 4,
+    borderRadius: 8,
+    fontSize: 17,
+    color: '#111111',
+    backgroundColor: '#dfe6ef',
   },
 });