diff --git a/.changeset/tender-cows-flow.md b/.changeset/tender-cows-flow.md new file mode 100644 index 0000000..ce69d4d --- /dev/null +++ b/.changeset/tender-cows-flow.md @@ -0,0 +1,12 @@ +--- +"react-native-gesture-image-viewer": patch +--- + +fix: remove key prop from list item children for better performance + +- Remove key prop from View children when using FlatList/FlashList +- Keep key prop only for ScrollView children +- Improves FlashList performance by allowing proper item reuse +- Follows FlashList official performance guidelines + +Refs: https://shopify.github.io/flash-list/docs/fundamentals/performance#remove-key-prop diff --git a/src/GestureViewer.tsx b/src/GestureViewer.tsx index c405308..f71220a 100644 --- a/src/GestureViewer.tsx +++ b/src/GestureViewer.tsx @@ -35,6 +35,8 @@ export function GestureViewer({ const loopData = useMemo(() => createLoopData(dataRef, enableLoop), [enableLoop]); + const isScrollView = isScrollViewLike(Component); + const { listRef, isZoomed, @@ -71,7 +73,7 @@ export function GestureViewer({ ({ item, index }: { item: T; index: number }) => { return ( ({ ); }, - [width, itemSpacing, renderItemProp, keyExtractor], + [width, itemSpacing, renderItemProp, keyExtractor, isScrollView], ); const getItemLayout = useCallback( @@ -141,7 +143,7 @@ export function GestureViewer({ {...(Platform.OS === 'web' && isFlashListLike(Component) && { dataSet: { 'flash-list-paging-enabled-fix': true } })} > - {isScrollViewLike(Component) ? ( + {isScrollView ? ( {loopData.map((item, index) => renderItem({ item, index }))}