Skip to content

Commit ffb38b7

Browse files
olafcholafch
committed
testing FlashList
1 parent a7350cc commit ffb38b7

9 files changed

Lines changed: 52 additions & 21 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
"@react-navigation/native": "^6.1.9",
107107
"@react-navigation/native-stack": "^6.9.17",
108108
"@react-navigation/stack": "^6.3.20",
109+
"@shopify/flash-list": "1.6.4",
109110
"@tanstack/react-query": "^4.29.19",
110111
"axios": "^1.7.2",
111112
"core-js": "^3.37.1",

‎src/components/COMPONENTS.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ FAB.Group
124124
Fail // Toast
125125
FieldWrapper
126126
FlatList
127+
FlashList
127128
Flex // TODO:
128129
FloatingMenu
129130
Form // TODO:

‎src/design-system/bottomSheets/BootomSheetScrollables.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
// Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1524
33
// Could be connected to this: https://github.com/gorhom/react-native-bottom-sheet/issues/1760
44
// After upgrading bottom sheet library try changing the imports, maybe it will work as expected
5-
// import { BottomSheetScrollView as ScrollView, BottomSheetFlatList as FlatList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet";
5+
// import { BottomSheetScrollView as ScrollView, BottomSheetFlashList as FlashList, BottomSheetSectionList as SectionList } from "@gorhom/bottom-sheet";
6+
import { FlashList } from '@shopify/flash-list'
67
import { SectionList } from 'react-native'
7-
import { ScrollView, FlatList } from 'react-native-gesture-handler'
8+
import { ScrollView } from 'react-native-gesture-handler'
89

910
export const BottomSheetScrollView = ScrollView
10-
export const BottomSheetFlatList = FlatList
11+
export const BottomSheetFlashList = FlashList
1112
export const BottomSheetSectionList = SectionList

‎src/design-system/bottomSheets/BottomSheetFlashList.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// export { BottomSheetFlashList } from '@gorhom/bottom-sheet'
2+
export { BottomSheetFlashList } from './BootomSheetScrollables'

‎src/design-system/bottomSheets/BottomSheetFlashList.web.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { FlashList as BottomSheetFlashList } from '@shopify/flash-list'

‎src/design-system/bottomSheets/BottomSheetFlatList.tsx‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/design-system/bottomSheets/BottomSheetFlatList.web.tsx‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/design-system/components/Select.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import { Text } from './Text'
1111
import { Touchable } from './Touchables/Touchable'
1212
import { SelectKey, SelectItemProps, SelectProps } from './types'
1313
import { BottomSheet } from '../bottomSheets/BottomSheet'
14-
import { BottomSheetFlatList } from '../bottomSheets/BottomSheetFlatList'
14+
import { BottomSheetFlashList } from '../bottomSheets/BottomSheetFlashList'
1515

16-
const ITEM_HEIGHT = 56
16+
// const ITEM_HEIGHT = 56
1717
const BOTTOM_SHEET_CONTENT_HEIGHT = Dimensions.get('screen').height / 1.5
1818

1919
const SelectItem = <T extends SelectKey>({
@@ -148,12 +148,12 @@ export const Select = <T extends SelectKey>({
148148

149149
const keyExtractor = useCallback((item: SelectItemProps<T>) => item.value.toString(), [])
150150

151-
const getItemLayout = useCallback(
152-
(_data: ArrayLike<SelectItemProps<T>> | null | undefined, index: number) => {
153-
return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
154-
},
155-
[]
156-
)
151+
// const getItemLayout = useCallback(
152+
// (_data: ArrayLike<SelectItemProps<T>> | null | undefined, index: number) => {
153+
// return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index }
154+
// },
155+
// []
156+
// )
157157

158158
const inputColor = useMemo(() => {
159159
return isError ? 'text.error.primary' : dropdownDisabled ? 'utility.gray.500' : 'text.primary'
@@ -177,13 +177,14 @@ export const Select = <T extends SelectKey>({
177177
<Icon color={inputColor} size={22} name="arrow-down-s-line" style={styles.icon} />
178178
</Touchable>
179179
<BottomSheet title={label} bottomSheetRef={ref}>
180-
<Box pb={6} px={4}>
181-
<BottomSheetFlatList
182-
style={styles.bottomSheetFlatList}
180+
<Box pb={6} px={4} style={{ height: BOTTOM_SHEET_CONTENT_HEIGHT }}>
181+
<BottomSheetFlashList
182+
style={styles.bottomSheetFlashList}
183183
data={items}
184184
keyExtractor={keyExtractor}
185185
renderItem={renderItem}
186-
getItemLayout={getItemLayout}
186+
estimatedItemSize={50} // Added
187+
initialScrollIndex={0} // Added
187188
/>
188189
</Box>
189190
</BottomSheet>
@@ -192,7 +193,7 @@ export const Select = <T extends SelectKey>({
192193
}
193194

194195
const styles = StyleSheet.create({
195-
bottomSheetFlatList: {
196+
bottomSheetFlashList: {
196197
maxHeight: BOTTOM_SHEET_CONTENT_HEIGHT,
197198
},
198199
icon: {

‎yarn.lock‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2645,6 +2645,14 @@
26452645
component-type "^1.2.1"
26462646
join-component "^1.1.0"
26472647

2648+
"@shopify/flash-list@1.6.4":
2649+
version "1.6.4"
2650+
resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.6.4.tgz#2844ae7334f314c06c62b649bc9c5de2480800b4"
2651+
integrity sha512-M2momcnY7swsvmpHIFDVbdOaFw4aQocJXA/lFP0Gpz+alQjFylqVKvszxl4atYO2SNbjxlb2L6hEP9WEcAknGQ==
2652+
dependencies:
2653+
recyclerlistview "4.2.0"
2654+
tslib "2.4.0"
2655+
26482656
"@sideway/address@^4.1.5":
26492657
version "4.1.5"
26502658
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5"
@@ -8916,7 +8924,7 @@ locate-path@^7.1.0:
89168924
dependencies:
89178925
p-locate "^6.0.0"
89188926

8919-
lodash.debounce@^4.0.8:
8927+
lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
89208928
version "4.0.8"
89218929
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
89228930
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -10820,7 +10828,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.2:
1082010828
kleur "^3.0.3"
1082110829
sisteransi "^1.0.5"
1082210830

10823-
prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
10831+
prop-types@15.8.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
1082410832
version "15.8.1"
1082510833
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
1082610834
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11246,6 +11254,15 @@ recast@^0.21.0:
1124611254
source-map "~0.6.1"
1124711255
tslib "^2.0.1"
1124811256

11257+
recyclerlistview@4.2.0:
11258+
version "4.2.0"
11259+
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef"
11260+
integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==
11261+
dependencies:
11262+
lodash.debounce "4.0.8"
11263+
prop-types "15.8.1"
11264+
ts-object-utils "0.0.5"
11265+
1124911266
redent@^3.0.0:
1125011267
version "3.0.0"
1125111268
resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -12669,6 +12686,11 @@ ts-interface-checker@^0.1.9:
1266912686
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
1267012687
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
1267112688

12689+
ts-object-utils@0.0.5:
12690+
version "0.0.5"
12691+
resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077"
12692+
integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==
12693+
1267212694
tsconfck@^2.0.1:
1267312695
version "2.1.2"
1267412696
resolved "https://registry.yarnpkg.com/tsconfck/-/tsconfck-2.1.2.tgz#f667035874fa41d908c1fe4d765345fcb1df6e35"
@@ -12684,6 +12706,11 @@ tsconfig-paths@^3.15.0:
1268412706
minimist "^1.2.6"
1268512707
strip-bom "^3.0.0"
1268612708

12709+
tslib@2.4.0:
12710+
version "2.4.0"
12711+
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
12712+
integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
12713+
1268712714
tslib@^1.10.0, tslib@^1.14.1, tslib@^1.8.1:
1268812715
version "1.14.1"
1268912716
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"

0 commit comments

Comments
 (0)