Cleanup fixture code

naqvitalha · naqvitalha · commit 330290e884b8 · 2025-07-22T09:45:25.000-07:00
diff --git a/fixture/react-native/src/Carousel.tsx b/fixture/react-native/src/Carousel.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   useWindowDimensions,
 } from "react-native";
-import { FlashListRef, RecyclerView } from "@shopify/flash-list";
+import { FlashListRef, FlashList } from "@shopify/flash-list";
 
 interface CarouselItem {
   id: string;
@@ -139,7 +139,7 @@ const Carousel = () => {
   return (
     <View style={styles.container}>
       <Text style={styles.headerTitle}>Simple Carousel</Text>
-      <RecyclerView
+      <FlashList
         testID="CarouselScreen"
         style={{ flex: 1 }}
         ref={flatListRef}
diff --git a/fixture/react-native/src/CellRendererExamples.tsx b/fixture/react-native/src/CellRendererExamples.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useCallback } from "react";
 import { View, Text, StyleSheet, Animated } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 import { tweets as tweetsData } from "./twitter/data/tweets";
 import Tweet from "./twitter/models/Tweet";
@@ -77,7 +77,7 @@ const FlashListCellRenderer = () => {
         <View style={styles.container}>
           <Text style={styles.title}>Fade-In Animation</Text>
           <View style={{ flex: 1 }}>
-            <RecyclerView
+            <FlashList
               data={tweetsData}
               renderItem={renderTweet}
               CellRendererComponent={FadeInCellRenderer}
@@ -89,7 +89,7 @@ const FlashListCellRenderer = () => {
         <View style={styles.container}>
           <Text style={styles.title}>Scale Animation</Text>
           <View style={{ flex: 1 }}>
-            <RecyclerView
+            <FlashList
               data={tweetsData}
               renderItem={renderTweet}
               CellRendererComponent={ScaleCellRenderer}
diff --git a/fixture/react-native/src/Chat.tsx b/fixture/react-native/src/Chat.tsx
@@ -7,7 +7,7 @@ import {
   SafeAreaView,
   StatusBar,
 } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 interface ChatMessage {
   id: string;
@@ -94,7 +94,7 @@ export function Chat() {
           </Pressable>
         </View>
 
-        <RecyclerView
+        <FlashList
           data={messages}
           maintainVisibleContentPosition={maintainVisibleContentPositionConfig}
           onStartReached={() => {
diff --git a/fixture/react-native/src/ComplexMasonry.tsx b/fixture/react-native/src/ComplexMasonry.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   ActivityIndicator,
 } from "react-native";
-import { FlashListRef, RecyclerView } from "@shopify/flash-list";
+import { FlashListRef, FlashList } from "@shopify/flash-list";
 import FastImage from "@d11/react-native-fast-image";
 
 // Define our data structure
@@ -181,14 +181,13 @@ const ComplexMasonryComponent = (_: unknown, ref: ForwardedRef<unknown>) => {
 
   return (
     <View style={styles.container}>
-      <RecyclerView
+      <FlashList
         ref={ref as React.RefObject<FlashListRef<MasonryItem>>}
         testID="ComplexMasonryList"
         data={items}
         masonry
         optimizeItemArrangement
         numColumns={columnCount}
-        estimatedItemSize={200}
         overrideItemLayout={(layout: any, item: MasonryItem) => {
           // Set the height based on the item's height property and expansion state
           layout.size = item.isExpanded ? item.height * 1.5 : item.height;
diff --git a/fixture/react-native/src/Debug/DebugScreen.tsx b/fixture/react-native/src/Debug/DebugScreen.tsx
@@ -26,7 +26,6 @@ const DebugScreen = () => {
         return item.name;
       }}
       renderItem={renderItem}
-      estimatedItemSize={44}
       ItemSeparatorComponent={Divider}
       data={debugItems}
     />
diff --git a/fixture/react-native/src/DynamicColumnSpan.tsx b/fixture/react-native/src/DynamicColumnSpan.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useCallback } from "react";
 import { Text, View, StyleSheet, Platform, Pressable } from "react-native";
-import { RecyclerView, useRecyclingState } from "@shopify/flash-list";
+import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface DynamicItem {
   id: number;
@@ -208,7 +208,7 @@ export function DynamicColumnSpan() {
         </View>
 
         {/* List */}
-        <RecyclerView
+        <FlashList
           testID="DynamicColumnSpanList"
           data={data}
           numColumns={numColumns}
@@ -217,7 +217,6 @@ export function DynamicColumnSpan() {
           overrideItemLayout={overrideItemLayout}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
-          estimatedItemSize={isMasonry ? 100 : 80}
         />
       </View>
     </React.StrictMode>
diff --git a/fixture/react-native/src/DynamicItems.tsx b/fixture/react-native/src/DynamicItems.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { View, Text, StyleSheet, Pressable } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 interface Item {
   id: string;
@@ -77,7 +77,7 @@ const DynamicItems = () => {
           <Text style={styles.buttonText}>Add 5 Items</Text>
         </Pressable>
       </View>
-      <RecyclerView
+      <FlashList
         data={items}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
diff --git a/fixture/react-native/src/Grid.tsx b/fixture/react-native/src/Grid.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useCallback } from "react";
 import { Text, View, StyleSheet, Platform, Pressable } from "react-native";
-import { RecyclerView, useRecyclingState } from "@shopify/flash-list";
+import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface GridItem {
   id: number;
@@ -70,7 +70,7 @@ export function Grid() {
   return (
     <React.StrictMode>
       <View style={styles.container}>
-        <RecyclerView
+        <FlashList
           testID="GridScreen"
           data={data}
           numColumns={2}
diff --git a/fixture/react-native/src/HeaderFooterExample.tsx b/fixture/react-native/src/HeaderFooterExample.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 interface ListItem {
   id: string;
@@ -70,7 +70,7 @@ export const HeaderFooterExample = () => {
 
   return (
     <View style={styles.container}>
-      <RecyclerView
+      <FlashList
         data={data}
         onLoad={handleLoad}
         renderItem={renderItem}
diff --git a/fixture/react-native/src/HorizontalList.tsx b/fixture/react-native/src/HorizontalList.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from "react";
 import { View, Text, StyleSheet, Pressable, StatusBar } from "react-native";
-import { RecyclerView, useRecyclingState } from "@shopify/flash-list";
+import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface Item {
   id: number;
@@ -83,7 +83,7 @@ const HorizontalList = () => {
     <View style={styles.container}>
       <StatusBar barStyle="dark-content" />
       <Text style={styles.header}>Horizontal List Example</Text>
-      <RecyclerView
+      <FlashList
         testID="HorizontalListScreen"
         horizontal
         data={data}
diff --git a/fixture/react-native/src/LayoutOptions.tsx b/fixture/react-native/src/LayoutOptions.tsx
@@ -8,7 +8,7 @@ import {
   Switch,
   ScrollView,
 } from "react-native";
-import { RecyclerView, useRecyclingState } from "@shopify/flash-list";
+import { FlashList, useRecyclingState } from "@shopify/flash-list";
 
 interface ListItem {
   id: number;
@@ -91,7 +91,7 @@ export function LayoutOptions() {
     <View style={styles.container}>
       {renderControls()}
 
-      <RecyclerView
+      <FlashList
         data={data}
         numColumns={isHorizontal ? 1 : numColumns}
         horizontal={isHorizontal}
diff --git a/fixture/react-native/src/List.tsx b/fixture/react-native/src/List.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useCallback, useRef, useState } from "react";
 import { View, Text, Pressable, StyleSheet } from "react-native";
-import { RecyclerView, FlashListRef } from "@shopify/flash-list";
+import { FlashList, FlashListRef } from "@shopify/flash-list";
 import Animated, {
   FadeIn,
   FadeOut,
@@ -61,7 +61,7 @@ const List = () => {
   );
 
   return (
-    <RecyclerView
+    <FlashList
       ref={list}
       refreshing={refreshing}
       onRefresh={() => {
diff --git a/fixture/react-native/src/Masonry.tsx b/fixture/react-native/src/Masonry.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Text, View, StyleSheet, Platform } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 interface MasonryData {
   index: number;
@@ -18,15 +18,11 @@ export function Masonry() {
   return (
     <React.StrictMode>
       <View style={styles.container}>
-        <RecyclerView
+        <FlashList
           testID="MasonryList"
           data={data}
           masonry
-          overrideItemLayout={(layout, item) => {
-            layout.size = item.height;
-          }}
           numColumns={columnCount}
-          estimatedItemSize={150}
           ListHeaderComponent={
             <Component
               item={{ index: 0, height: 100 }}
diff --git a/fixture/react-native/src/Messages/Messages.tsx b/fixture/react-native/src/Messages/Messages.tsx
@@ -31,22 +31,13 @@ const Messages = () => {
       {/* @ts-ignore - Type compatibility issue between different React versions */}
       <FlashList
         renderItem={MessageItem}
-        inverted
-        estimatedItemSize={100}
         keyExtractor={(item) => {
           return item.id;
         }}
         maintainVisibleContentPosition={{
           autoscrollToBottomThreshold: 0.2,
           startRenderingFromBottom: true,
         }}
-        overrideItemLayout={(layout, item) => {
-          switch (item.type) {
-            case MessageType.Image:
-              layout.size = 200;
-              break;
-          }
-        }}
         getItemType={(item) => {
           return item.type;
         }}
diff --git a/fixture/react-native/src/MovieList.tsx b/fixture/react-native/src/MovieList.tsx
@@ -7,7 +7,7 @@ import {
   StatusBar,
   Dimensions,
 } from "react-native";
-import { useRecyclingState, RecyclerView } from "@shopify/flash-list";
+import { useRecyclingState, FlashList } from "@shopify/flash-list";
 
 // Types for our data
 interface Movie {
@@ -228,7 +228,7 @@ const CategoryRow = ({ category }: { category: Category }) => {
     <View style={styles.categoryContainer}>
       <Text style={styles.categoryTitle}>{category.title}</Text>
       <View style={styles.horizontalListContainer}>
-        <RecyclerView
+        <FlashList
           horizontal
           data={category.movies}
           renderItem={renderMoviePoster}
@@ -261,7 +261,7 @@ const MovieList = () => {
       <StatusBar barStyle="light-content" />
 
       <View style={styles.listContainer}>
-        <RecyclerView
+        <FlashList
           data={categories}
           onLoad={({ elapsedTimeInMs }) => {
             console.log("onLoad ------------>", elapsedTimeInMs);
diff --git a/fixture/react-native/src/PaginatedList.tsx b/fixture/react-native/src/PaginatedList.tsx
@@ -4,7 +4,7 @@
  */
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 export interface PaginatedListState {
   // This property is used but eslint fails to find its usage.
@@ -32,7 +32,7 @@ export default class PaginatedList extends React.Component<PaginatedListState> {
 
   render() {
     return (
-      <RecyclerView
+      <FlashList
         keyExtractor={(item: number) => {
           return item.toString();
         }}
@@ -44,7 +44,6 @@ export default class PaginatedList extends React.Component<PaginatedListState> {
             </View>
           );
         }}
-        estimatedItemSize={100}
         onEndReached={() => {
           console.log("onEndReached");
           // Since FlatList is a pure component, data reference should change for a render
diff --git a/fixture/react-native/src/RecyclerViewHandlerTest.tsx b/fixture/react-native/src/RecyclerViewHandlerTest.tsx
@@ -7,7 +7,7 @@ import {
   SafeAreaView,
   ScrollView,
 } from "react-native";
-import { RecyclerView } from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
 
 // Define our item type
 interface Item {
@@ -312,7 +312,7 @@ const RecyclerViewHandlerTest = () => {
         {/* List Container - Now on the right side */}
         <View style={styles.listContainer}>
           {/* Use FlatList instead of FlashList to avoid import issues */}
-          <RecyclerView
+          <FlashList
             testID="RecyclerView"
             ref={listRef}
             key={horizontal ? "horizontal" : "vertical"}
diff --git a/fixture/react-native/src/Reminders.tsx b/fixture/react-native/src/Reminders.tsx
@@ -10,7 +10,7 @@ import {
   ViewProps,
   Pressable,
 } from "react-native";
-import { FlashList } from "@shopify/flash-list";
+import { FlashList, FlashListRef } from "@shopify/flash-list";
 import Animated, { FadeOut, LinearTransition } from "react-native-reanimated";
 
 interface Reminder {
@@ -145,7 +145,7 @@ const Reminders = () => {
     [setReminders, reminders]
   );
 
-  const list = useRef<FlashList<Reminder> | null>(null);
+  const list = useRef<FlashListRef<Reminder> | null>(null);
 
   const onChangeText = useCallback(
     (item: Reminder, text: string) => {
@@ -196,7 +196,6 @@ const Reminders = () => {
             return item.id;
           }}
           ListHeaderComponent={Header}
-          estimatedItemSize={50}
           ItemSeparatorComponent={Divider}
           data={reminders}
         />
diff --git a/fixture/react-native/src/SectionList.tsx b/fixture/react-native/src/SectionList.tsx
@@ -10,7 +10,11 @@ import {
   LayoutAnimation,
   StyleSheet,
 } from "react-native";
-import { FlashList, ListRenderItemInfo } from "@shopify/flash-list";
+import {
+  FlashList,
+  FlashListRef,
+  ListRenderItemInfo,
+} from "@shopify/flash-list";
 
 const generateItemsArray = (size: number) => {
   const arr = new Array(size);
@@ -48,7 +52,7 @@ export const SectionList = () => {
   const [refreshing, setRefreshing] = useState(false);
   const [sections, setSections] = useState(generateSectionsData(10));
 
-  const list = useRef<FlashList<SectionListItem> | null>(null);
+  const list = useRef<FlashListRef<SectionListItem> | null>(null);
 
   const flattenedSections = useMemo(
     () =>
@@ -165,7 +169,6 @@ export const SectionList = () => {
             : `${item.sectionIndex}${item.index}`
         }
         renderItem={renderItem}
-        estimatedItemSize={100}
         stickyHeaderIndices={stickyHeaderIndices}
         data={flattenedSections}
       />
diff --git a/fixture/react-native/src/ShowcaseApp.tsx b/fixture/react-native/src/ShowcaseApp.tsx
diff --git a/fixture/react-native/src/contacts/Contacts.tsx b/fixture/react-native/src/contacts/Contacts.tsx
diff --git a/fixture/react-native/src/twitter/Twitter.tsx b/fixture/react-native/src/twitter/Twitter.tsx
diff --git a/fixture/react-native/src/twitter/TwitterBenchmark.tsx b/fixture/react-native/src/twitter/TwitterBenchmark.tsx
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/recyclerview/RecyclerViewManager.ts b/src/recyclerview/RecyclerViewManager.ts
