Shopify · OskarEichler · Aug 28, 2026
diff --git a/fixture/react-native/src/ComplexMasonry.tsx b/fixture/react-native/src/ComplexMasonry.tsx
@@ -1,11 +1,19 @@
-import React, { forwardRef, ForwardedRef, useState, useCallback } from "react";
+import React, {
+  forwardRef,
+  ForwardedRef,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import {
   Text,
   View,
   StyleSheet,
   Platform,
   TouchableOpacity,
   ActivityIndicator,
+  useWindowDimensions,
 } from "react-native";
 import { FlashListRef, FlashList } from "@shopify/flash-list";
 import FastImage from "@d11/react-native-fast-image";
@@ -132,9 +140,21 @@ const MasonryCard = ({
 
 // Create our masonry component
 const ComplexMasonryComponent = (_: unknown, ref: ForwardedRef<unknown>) => {
+  const { height } = useWindowDimensions();
   const columnCount = 3;
   const [items, setItems] = useState(() => generateMasonryData(50));
   const [isLoading, setIsLoading] = useState(false);
+  const loadTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (loadTimeout.current !== null) {
+        clearTimeout(loadTimeout.current);
+        loadTimeout.current = null;
+      }
+    },
+    []
+  );
 
   // Handle toggling the expanded state of an item
   const handleToggleExpand = useCallback((id: string) => {
@@ -147,19 +167,20 @@ const ComplexMasonryComponent = (_: unknown, ref: ForwardedRef<unknown>) => {
 
   // Handle loading more items when reaching the end of the list
   const handleEndReached = useCallback(() => {
-    if (isLoading) return;
+    if (loadTimeout.current !== null) return;
 
     setIsLoading(true);
 
     // Simulate network delay
-    setTimeout(() => {
+    loadTimeout.current = setTimeout(() => {
+      loadTimeout.current = null;
       setItems((currentItems) => [
         ...currentItems,
         ...generateMasonryData(20, currentItems.length),
       ]);
       setIsLoading(false);
     }, 500);
-  }, [isLoading]);
+  }, []);
 
   // Footer component with loading indicator
   const renderFooter = useCallback(() => {
@@ -180,7 +201,7 @@ const ComplexMasonryComponent = (_: unknown, ref: ForwardedRef<unknown>) => {
   );
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, Platform.OS === "web" && { height }]}>
       <FlashList
         ref={ref as React.RefObject<FlashListRef<MasonryItem>>}
         testID="ComplexMasonryList"
@@ -218,7 +239,6 @@ export const ComplexMasonry = forwardRef(ComplexMasonryComponent);
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     backgroundColor: "#f5f5f5",
   },
   listContent: {

diff --git a/fixture/react-native/src/DynamicColumnSpan.tsx b/fixture/react-native/src/DynamicColumnSpan.tsx
@@ -1,5 +1,12 @@
 import React, { useMemo, useState, useCallback } from "react";
-import { Text, View, StyleSheet, Platform, Pressable } from "react-native";
+import {
+  Text,
+  View,
+  StyleSheet,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+} from "react-native";
 import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface DynamicItem {
@@ -53,6 +60,7 @@ const arraysEqual = (arr1: number[], arr2: number[]): boolean => {
 };
 
 export function DynamicColumnSpan() {
+  const { height } = useWindowDimensions();
   const [numItems] = useState(500);
   const [isMasonry, setIsMasonry] = useState(false);
   const [numColumns, setNumColumns] = useState(3);
@@ -101,10 +109,6 @@ export function DynamicColumnSpan() {
     []
   );
 
-  const toggleLayout = () => {
-    setIsMasonry(!isMasonry);
-  };
-
   const changeColumns = (cols: number) => {
     setNumColumns(cols);
   };
@@ -115,14 +119,14 @@ export function DynamicColumnSpan() {
 
   return (
     <React.StrictMode>
-      <View style={styles.container}>
+      <View style={[styles.container, Platform.OS === "web" && { height }]}>
         {/* Control Panel */}
         <View style={styles.controlPanel}>
           <View style={styles.controlRow}>
             <Text style={styles.controlLabel}>Layout:</Text>
             <Pressable
               style={[styles.controlButton, !isMasonry && styles.activeButton]}
-              onPress={toggleLayout}
+              onPress={() => setIsMasonry(false)}
             >
               <Text
                 style={[
@@ -135,7 +139,7 @@ export function DynamicColumnSpan() {
             </Pressable>
             <Pressable
               style={[styles.controlButton, isMasonry && styles.activeButton]}
-              onPress={toggleLayout}
+              onPress={() => setIsMasonry(true)}
             >
               <Text
                 style={[
@@ -275,7 +279,6 @@ const DynamicGridItem = ({
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     backgroundColor: "#f5f5f5",
   },
   controlPanel: {

diff --git a/fixture/react-native/src/Grid.tsx b/fixture/react-native/src/Grid.tsx
@@ -1,5 +1,12 @@
 import React, { useMemo, useState, useCallback } from "react";
-import { Text, View, StyleSheet, Platform, Pressable } from "react-native";
+import {
+  Text,
+  View,
+  StyleSheet,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+} from "react-native";
 import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface GridItem {
@@ -41,6 +48,7 @@ const generateData = (count: number): GridItem[] => {
 };
 
 export function Grid() {
+  const { height } = useWindowDimensions();
   const [numItems] = useState(1000); // Default to 100 items
 
   // Generate colors for the grid items
@@ -69,7 +77,7 @@ export function Grid() {
 
   return (
     <React.StrictMode>
-      <View style={styles.container}>
+      <View style={[styles.container, Platform.OS === "web" && { height }]}>
         <FlashList
           testID="GridScreen"
           data={data}
@@ -118,7 +126,6 @@ const GridItem = ({ item }: { item: GridItem }) => {
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     backgroundColor: "#f5f5f5",
   },
   itemWrapper: {

diff --git a/fixture/react-native/src/LayoutOptions.tsx b/fixture/react-native/src/LayoutOptions.tsx
@@ -7,6 +7,7 @@ import {
   Pressable,
   Switch,
   ScrollView,
+  useWindowDimensions,
 } from "react-native";
 import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
@@ -38,6 +39,7 @@ const colors = [
 ];
 
 export function LayoutOptions() {
+  const { height } = useWindowDimensions();
   // Configuration states
   const [numColumns, setNumColumns] = useState(1);
   const [isHorizontal, setIsHorizontal] = useState(false);
@@ -88,10 +90,11 @@ export function LayoutOptions() {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, Platform.OS === "web" && { height }]}>
       {renderControls()}
 
       <FlashList
+        key={isHorizontal ? "horizontal" : "vertical"}
         data={data}
         numColumns={isHorizontal ? 1 : numColumns}
         horizontal={isHorizontal}
@@ -151,7 +154,6 @@ const ListItemComponent = ({ item }: { item: ListItem }) => {
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     backgroundColor: "#f5f5f5",
   },
   controls: {

diff --git a/fixture/react-native/src/Masonry.tsx b/fixture/react-native/src/Masonry.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { Text, View, StyleSheet, Platform } from "react-native";
+import {
+  Text,
+  View,
+  StyleSheet,
+  Platform,
+  useWindowDimensions,
+} from "react-native";
 import { FlashList } from "@shopify/flash-list";
 
 interface MasonryData {
@@ -8,6 +14,7 @@ interface MasonryData {
 }
 
 export function Masonry() {
+  const { height } = useWindowDimensions();
   const columnCount = 3;
   const data: MasonryData[] = new Array(999).fill(null).map((_, index) => {
     return {
@@ -17,7 +24,7 @@ export function Masonry() {
   });
   return (
     <React.StrictMode>
-      <View style={styles.container}>
+      <View style={[styles.container, Platform.OS === "web" && { height }]}>
         <FlashList
           testID="MasonryList"
           data={data}
@@ -100,7 +107,6 @@ const Component = (props: {
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     justifyContent: "center",
     backgroundColor: "#ecf0f1",
   },

diff --git a/fixture/web/Grid.tsx b/fixture/web/Grid.tsx
@@ -1,6 +1,13 @@
 import React, { useMemo, useState, useCallback } from "react";
-import { Text, View, StyleSheet, Platform, Pressable } from "react-native";
-import { RecyclerView, useRecyclingState } from "@shopify/flash-list";
+import {
+  Text,
+  View,
+  StyleSheet,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+} from "react-native";
+import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface GridItem {
   id: number;
@@ -41,6 +48,7 @@ const generateData = (count: number): GridItem[] => {
 };
 
 export function Grid() {
+  const { height } = useWindowDimensions();
   const [numItems] = useState(1000); // Default to 100 items
 
   // Generate colors for the grid items
@@ -68,8 +76,8 @@ export function Grid() {
   const keyExtractor = useCallback((item: GridItem) => item.id.toString(), []);
 
   return (
-    <View style={styles.container}>
-      <RecyclerView
+    <View style={[styles.container, Platform.OS === "web" && { height }]}>
+      <FlashList
         testID="GridScreen"
         data={data}
         numColumns={2}
@@ -115,7 +123,6 @@ const GridItem = ({ item }: { item: GridItem }) => {
 const styles = StyleSheet.create({
   container: {
     flex: Platform.OS === "web" ? undefined : 1,
-    height: Platform.OS === "web" ? window.innerHeight : undefined,
     backgroundColor: "#f5f5f5",
   },
   itemWrapper: {