FlashList KeyExtractor issue reproduction

app/details.tsx

@@ -1,8 +1,11 @@
-import styled from '@emotion/native';
+import styled, {css} from '@emotion/native';
 import {Typography} from 'dooboo-ui';
 import {Stack} from 'expo-router';
 
 import {t} from '../src/STRINGS';
+import {FlashList} from '@shopify/flash-list';
+import {View} from 'react-native';
+import {useCallback, useEffect, useState} from 'react';
 
 const Container = styled.View`
   flex: 1;
@@ -11,10 +14,56 @@ const Container = styled.View`
 `;
 
 const Content = styled.View`
-  padding: 16px;
+  flex: 1;
 `;
 
+const DATA = [
+  {title: 'First Item'},
+  {title: 'Second Item'},
+  {title: 'Third Item'},
+  {title: 'Fourth Item'},
+  {title: 'Fifth Item'},
+  {title: 'Sixth Item'},
+  {title: 'Seventh Item'},
+  {title: 'Eighth Item'},
+  {title: 'Ninth Item'},
+  {title: 'Tenth Item'},
+  {title: 'Eleventh Item'},
+  {title: 'Twelfth Item'},
+  {title: 'Thirteenth Item'},
+  {title: 'Fourteenth Item'},
+  {title: 'Fifteenth Item'},
+  {title: 'Sixteenth Item'},
+  {title: 'Seventeenth Item'},
+  {title: 'Eighteenth Item'},
+  {title: 'Nineteenth Item'},
+  {title: 'Twentieth Item'},
+  {title: 'Twenty-First Item'},
+  {title: 'Twenty-Second Item'},
+  {title: 'Twenty-Third Item'},
+  {title: 'Twenty-Fourth Item'},
+  {title: 'Twenty-Fifth Item'},
+  {title: 'Twenty-Sixth Item'},
+  {title: 'Twenty-Seventh Item'},
+  {title: 'Twenty-Eighth Item'},
+  {title: 'Twenty-Ninth Item'},
+  {title: 'Thirtieth Item'},
+];
+
 export default function Details(): JSX.Element {
+  const [data, setData] = useState(DATA);
+
+  const keyExtractor = useCallback(
+    (item: any, i: number) => `${i}-${item.title}`,
+    [],
+  );
+
+  useEffect(() => {
+    setTimeout(() => {
+      setData(DATA.concat(DATA));
+    }, 1000);
+  }, []);
+
   return (
     <Container>
       <Stack.Screen
@@ -23,7 +72,20 @@ export default function Details(): JSX.Element {
         }}
       />
       <Content>
-        <Typography.Body1>{t('DETAILS')}</Typography.Body1>
+        <FlashList
+          data={data}
+          keyExtractor={keyExtractor}
+          renderItem={({item}) => (
+            <View
+              style={css`
+                padding: 16px;
+              `}
+            >
+              <Typography.Body2>{item.title}</Typography.Body2>
+            </View>
+          )}
+          estimatedItemSize={10}
+        />
       </Content>
     </Container>
   );

package.json

@@ -22,7 +22,7 @@
     "@expo/react-native-action-sheet": "^4.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
-    "@shopify/flash-list": "1.6.4",
+    "@shopify/flash-list": "^1.7.1",
     "date-fns": "^3.6.0",
     "dooboo-ui": "^0.2.34",
     "expo": "~51.0.26",

yarn.lock

@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: A3E5273EAC5FA4C3-996010eb8a79a45c-6A72C9F9DF71E842-1aa3c3eec6bce9f1
+# bun ./bun.lockb --hash: FFF02118F4815372-b8494be1e2004cd2-4890C12D22EDBD16-a876034d0648c3e6
 
 
 "@aashutoshrathi/word-wrap@^1.2.3":
@@ -5369,13 +5369,13 @@
     component-type "^1.2.1"
     join-component "^1.1.0"
 
-"@shopify/flash-list@1.6.4":
-  version "1.6.4"
-  resolved "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.6.4.tgz"
-  integrity sha512-M2momcnY7swsvmpHIFDVbdOaFw4aQocJXA/lFP0Gpz+alQjFylqVKvszxl4atYO2SNbjxlb2L6hEP9WEcAknGQ==
+"@shopify/flash-list@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.7.1.tgz"
+  integrity sha512-sUYl7h8ydJutufA26E42Hj7cLvaBTpkMIyNJiFrxUspkcANb6jnFiLt9rEwAuDjvGk/C0lHau+WyT6ZOxqVPwg==
   dependencies:
-    tslib "2.4.0"
-    recyclerlistview "4.2.0"
+    recyclerlistview "4.2.1"
+    tslib "2.6.3"
 
 "@sideway/address@^4.1.4":
   version "4.1.4"
@@ -15454,13 +15454,13 @@ recoil@*, recoil@^0.7.7:
   dependencies:
     hamt_plus "1.0.2"
 
-[email protected].0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz"
-  integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==
+[email protected].1:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.1.tgz"
+  integrity sha512-NtVYjofwgUCt1rEsTp6jHQg/47TWjnO92TU2kTVgJ9wsc/ely4HnizHHa+f/dI7qaw4+zcSogElrLjhMltN2/g==
   dependencies:
-    prop-types "15.8.1"
     lodash.debounce "4.0.8"
+    prop-types "15.8.1"
     ts-object-utils "0.0.5"
 
 redent@^3.0.0:
@@ -17327,16 +17327,16 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-[email protected]:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
 tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2:
   version "2.6.2"
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+[email protected]:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 turbo-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.0.1.tgz"