[RNTester][iOS] Playground reproducer: inverted FlatList renders nothing at rest on device (#59731)

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',
   },
 });