From 134633ff5c2ef1a6df7a53e18afb14f4f4523147 Mon Sep 17 00:00:00 2001 From: hyochan Date: Fri, 9 Aug 2024 16:24:01 +0900 Subject: [PATCH 1/2] chore: reproduce collision https://github.com/Shopify/flash-list/issues/730 --- app/details.tsx | 63 +++++++++++++++++++++++++++++++++++++++++++++--- bun.lockb | Bin 933000 -> 933000 bytes package.json | 2 +- yarn.lock | 34 +++++++++++++------------- 4 files changed, 78 insertions(+), 21 deletions(-) diff --git a/app/details.tsx b/app/details.tsx index 9ba786c..a06b0a7 100644 --- a/app/details.tsx +++ b/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 {useEffect, useState} from 'react'; const Container = styled.View` flex: 1; @@ -11,10 +14,51 @@ 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); + + useEffect(() => { + setTimeout(() => { + setData(DATA.concat(DATA)); + }, 1000); + }, []); + return ( - {t('DETAILS')} + item.title} + renderItem={({item}) => ( + + {item.title} + + )} + estimatedItemSize={10} + /> ); diff --git a/bun.lockb b/bun.lockb index 7728e394167c0d2b430e7a33a3f061e61cf954e9..6e85662806fb53e1cece325187b1cfd64bebb925 100755 GIT binary patch delta 653 zcmeD9Y0>f1VuGH+{||~1UmAmpc6fR}e8k{$$z#GnU8T2s#a5It`?7f)ezwt1$Vj53 zI43iSfq_9}5hH^D14F|+Ak7b?H&+-faFuYIe|Oa)@!dblxBP3?R=4nRSsi`rXva0n zW`m0D1{I7`7EN~PGvQPL>M;W9VVZn!yE$hVkmmv9u}pTHYRgUY8qi|NPa^mLt6o^$!?6Ri`nf$`skbKW1ECR=6k z%#Ha_SJ`}aXOFCC@XXe;@R@eG z?BDdx>>B=?H96GftU@5*|%TF;#f0*F?W0IZw}`|S&)@BKpX_Lo(X6*I}keq z*_VJEyX|*#I639n;tci7^$gqJbaQTh)6F&K!1P5v++s|I4AT={af+}S>6z&nPiM^F z5}xME%{6_OAh*f%MT@zF*i7^c^eh;rE9h{GOqcQH=3tyR-QJg5n{n;*Y+r6kj%~o0 z;{?Xs^a2eosrF^Q+(68;eVH$>d@wW6y6Gnt@aj+hFr7zedWkWQ!u0P8cr_Rerzf1VuGH+;-~6%YvPw2o|z!GW#adH4n@Bo^?GP$wGoU<3ma|7}iCNoYl=e!K$83B1r zK-K2kcStkcIX^wbkXc~+lGjWtT;a@P!tF|~%s|YtUCEU-TE)RQbH&V)H{PAm*_Y+6 z5O6j3@+@&aDW`VM82+asf7zDX&zj0{^i4DS;-t1VZ}YhJ_*mFC{S_|uS6d1= z)g`Cz&19AE+4aDw+ug2-t6iJxvu&N^za+nN2cml?G8{-;Hl54)-+|w2mp(drLAqpK zqwfK=oryayXjrU!pLspm_Q8!0ZTr8yVPs%nWcbJb4@lciugqc%pI(v0%Ii?R#&3zk z{Y|<}sgeH9hVypIiyJdt{wA%%bgVzYC(7aUj7>h$zhw*G%>8}s>e3wXFu7eu-!Cl> zkz1wYD!qB?_rUg}S*$?J2E^>!k7jXfpTL;6z4kYUbD^vq8v}z45HkT|f*pv1fL31u za-2a<*nT&MlT)6}P|r-ygrWUSH|O>@-CT1HOkd=~Eh1~8X8=?Wi&a?sF)^Cx8R;2J zpP0&}KYcgn0O+>#tE zz=-1nM%?rQ4KAtnWxm`%%(H!&FRy$sGtm0!Cl>JPPuE39c?6~( UQsGgWe&8FA#P$yhd1uT500X}KmjD0& diff --git a/package.json b/package.json index cb9b9b4..502b095 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 3002da8..9c9eef3 100644 --- a/yarn.lock +++ b/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" -recyclerlistview@4.2.0: - version "4.2.0" - resolved "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz" - integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A== +recyclerlistview@4.2.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" -tslib@2.4.0: - 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== +tslib@2.6.3: + 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" From b89ff8c9f9b6b74e2d679df0b629135af5580445 Mon Sep 17 00:00:00 2001 From: hyochan Date: Fri, 9 Aug 2024 17:53:08 +0900 Subject: [PATCH 2/2] fix: key extractor --- app/details.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/details.tsx b/app/details.tsx index a06b0a7..62328f9 100644 --- a/app/details.tsx +++ b/app/details.tsx @@ -5,7 +5,7 @@ import {Stack} from 'expo-router'; import {t} from '../src/STRINGS'; import {FlashList} from '@shopify/flash-list'; import {View} from 'react-native'; -import {useEffect, useState} from 'react'; +import {useCallback, useEffect, useState} from 'react'; const Container = styled.View` flex: 1; @@ -53,6 +53,11 @@ const DATA = [ 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)); @@ -69,7 +74,7 @@ export default function Details(): JSX.Element { item.title} + keyExtractor={keyExtractor} renderItem={({item}) => (