@shopify/flash-list 2.0.2-rc.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -97
- package/dist/AnimatedFlashList.js +2 -2
- package/dist/AnimatedFlashList.js.map +1 -1
- package/dist/FlashList.d.ts +1 -167
- package/dist/FlashList.d.ts.map +1 -1
- package/dist/FlashList.js +3 -595
- package/dist/FlashList.js.map +1 -1
- package/dist/FlashListProps.d.ts +2 -63
- package/dist/FlashListProps.d.ts.map +1 -1
- package/dist/FlashListProps.js.map +1 -1
- package/dist/__tests__/LayoutCommitObserver.test.js +6 -4
- package/dist/__tests__/LayoutCommitObserver.test.js.map +1 -1
- package/dist/__tests__/RecyclerView.test.js +2 -2
- package/dist/__tests__/RecyclerView.test.js.map +1 -1
- package/dist/__tests__/ViewabilityHelper.test.js +3 -4
- package/dist/__tests__/ViewabilityHelper.test.js.map +1 -1
- package/dist/benchmark/JSFPSMonitor.d.ts.map +1 -1
- package/dist/benchmark/JSFPSMonitor.js +2 -1
- package/dist/benchmark/JSFPSMonitor.js.map +1 -1
- package/dist/benchmark/useBenchmark.d.ts +2 -4
- package/dist/benchmark/useBenchmark.d.ts.map +1 -1
- package/dist/benchmark/useBenchmark.js +12 -24
- package/dist/benchmark/useBenchmark.js.map +1 -1
- package/dist/benchmark/useFlatListBenchmark.d.ts.map +1 -1
- package/dist/benchmark/useFlatListBenchmark.js +2 -1
- package/dist/benchmark/useFlatListBenchmark.js.map +1 -1
- package/dist/errors/ErrorMessages.d.ts +16 -0
- package/dist/errors/ErrorMessages.d.ts.map +1 -0
- package/dist/errors/ErrorMessages.js +19 -0
- package/dist/errors/ErrorMessages.js.map +1 -0
- package/dist/errors/WarningMessages.d.ts +5 -0
- package/dist/errors/WarningMessages.d.ts.map +1 -0
- package/dist/errors/WarningMessages.js +9 -0
- package/dist/errors/WarningMessages.js.map +1 -0
- package/dist/index.d.ts +3 -9
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -29
- package/dist/index.js.map +1 -1
- package/dist/isNewArch.d.ts +2 -0
- package/dist/isNewArch.d.ts.map +1 -0
- package/dist/isNewArch.js +25 -0
- package/dist/isNewArch.js.map +1 -0
- package/dist/native/config/PlatformHelper.android.d.ts +1 -22
- package/dist/native/config/PlatformHelper.android.d.ts.map +1 -1
- package/dist/native/config/PlatformHelper.android.js +1 -16
- package/dist/native/config/PlatformHelper.android.js.map +1 -1
- package/dist/native/config/PlatformHelper.d.ts +1 -22
- package/dist/native/config/PlatformHelper.d.ts.map +1 -1
- package/dist/native/config/PlatformHelper.ios.d.ts +1 -22
- package/dist/native/config/PlatformHelper.ios.d.ts.map +1 -1
- package/dist/native/config/PlatformHelper.ios.js +1 -15
- package/dist/native/config/PlatformHelper.ios.js.map +1 -1
- package/dist/native/config/PlatformHelper.js +1 -16
- package/dist/native/config/PlatformHelper.js.map +1 -1
- package/dist/native/config/PlatformHelper.web.d.ts +1 -23
- package/dist/native/config/PlatformHelper.web.d.ts.map +1 -1
- package/dist/native/config/PlatformHelper.web.js +1 -18
- package/dist/native/config/PlatformHelper.web.js.map +1 -1
- package/dist/recyclerview/RecyclerView.d.ts.map +1 -1
- package/dist/recyclerview/RecyclerView.js +7 -1
- package/dist/recyclerview/RecyclerView.js.map +1 -1
- package/dist/recyclerview/RecyclerViewManager.d.ts.map +1 -1
- package/dist/recyclerview/RecyclerViewManager.js +9 -8
- package/dist/recyclerview/RecyclerViewManager.js.map +1 -1
- package/dist/recyclerview/RecyclerViewProps.d.ts +1 -8
- package/dist/recyclerview/RecyclerViewProps.d.ts.map +1 -1
- package/dist/recyclerview/hooks/useRecyclerViewController.d.ts.map +1 -1
- package/dist/recyclerview/hooks/useRecyclerViewController.js +4 -0
- package/dist/recyclerview/hooks/useRecyclerViewController.js.map +1 -1
- package/dist/recyclerview/layout-managers/LayoutManager.d.ts.map +1 -1
- package/dist/recyclerview/layout-managers/LayoutManager.js +2 -1
- package/dist/recyclerview/layout-managers/LayoutManager.js.map +1 -1
- package/dist/recyclerview/viewability/ViewToken.d.ts.map +1 -0
- package/dist/recyclerview/viewability/ViewToken.js.map +1 -0
- package/dist/{viewability → recyclerview/viewability}/ViewabilityHelper.d.ts +2 -2
- package/dist/recyclerview/viewability/ViewabilityHelper.d.ts.map +1 -0
- package/dist/{viewability → recyclerview/viewability}/ViewabilityHelper.js +2 -4
- package/dist/{viewability → recyclerview/viewability}/ViewabilityHelper.js.map +1 -1
- package/dist/{viewability → recyclerview/viewability}/ViewabilityManager.d.ts +3 -3
- package/dist/recyclerview/viewability/ViewabilityManager.d.ts.map +1 -0
- package/dist/{viewability → recyclerview/viewability}/ViewabilityManager.js +16 -16
- package/dist/recyclerview/viewability/ViewabilityManager.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/jestSetup.js +0 -9
- package/package.json +2 -11
- package/src/AnimatedFlashList.ts +2 -2
- package/src/FlashList.ts +1 -0
- package/src/FlashListProps.ts +3 -79
- package/src/__tests__/LayoutCommitObserver.test.tsx +7 -4
- package/src/__tests__/RecyclerView.test.tsx +2 -2
- package/src/__tests__/ViewabilityHelper.test.ts +13 -14
- package/src/benchmark/JSFPSMonitor.ts +3 -3
- package/src/benchmark/useBenchmark.ts +12 -40
- package/src/benchmark/useFlatListBenchmark.ts +3 -1
- package/src/errors/ErrorMessages.ts +26 -0
- package/src/errors/WarningMessages.ts +7 -0
- package/src/index.ts +7 -43
- package/src/isNewArch.ts +25 -0
- package/src/native/config/PlatformHelper.android.ts +1 -25
- package/src/native/config/PlatformHelper.ios.ts +1 -24
- package/src/native/config/PlatformHelper.ts +1 -25
- package/src/native/config/PlatformHelper.web.ts +1 -30
- package/src/recyclerview/RecyclerView.tsx +7 -3
- package/src/recyclerview/RecyclerViewManager.ts +9 -18
- package/src/recyclerview/RecyclerViewProps.ts +1 -11
- package/src/recyclerview/hooks/useRecyclerViewController.tsx +4 -0
- package/src/recyclerview/layout-managers/LayoutManager.ts +2 -1
- package/src/{viewability → recyclerview/viewability}/ViewabilityHelper.ts +8 -9
- package/src/{viewability → recyclerview/viewability}/ViewabilityManager.ts +18 -20
- package/RNFlashList.podspec +0 -37
- package/android/build.gradle +0 -89
- package/android/src/main/AndroidManifest.xml +0 -3
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutShadow.kt +0 -105
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutView.kt +0 -158
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/AutoLayoutViewManager.kt +0 -70
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/BlankAreaEvent.kt +0 -29
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainer.java +0 -16
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainerImpl.kt +0 -16
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/CellContainerManager.kt +0 -34
- package/android/src/main/kotlin/com/shopify/reactnative/flash_list/FlashListPackage.kt +0 -19
- package/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerDelegate.java +0 -47
- package/android/src/paper/java/com/facebook/react/viewmanagers/AutoLayoutViewManagerInterface.java +0 -21
- package/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerDelegate.java +0 -32
- package/android/src/paper/java/com/facebook/react/viewmanagers/CellContainerManagerInterface.java +0 -16
- package/android/src/test/java/com/shopify/reactnative/flash_list/AutoLayoutShadowTest.kt +0 -147
- package/android/src/test/java/com/shopify/reactnative/flash_list/models/Rect.kt +0 -61
- package/android/src/test/java/com/shopify/reactnative/flash_list/models/TestCollection.kt +0 -6
- package/android/src/test/java/com/shopify/reactnative/flash_list/models/TestDataModel.kt +0 -8
- package/android/src/test/resources/LayoutTestData.json +0 -788
- package/dist/GridLayoutProviderWithProps.d.ts +0 -42
- package/dist/GridLayoutProviderWithProps.d.ts.map +0 -1
- package/dist/GridLayoutProviderWithProps.js +0 -114
- package/dist/GridLayoutProviderWithProps.js.map +0 -1
- package/dist/MasonryFlashList.d.ts +0 -51
- package/dist/MasonryFlashList.d.ts.map +0 -1
- package/dist/MasonryFlashList.js +0 -252
- package/dist/MasonryFlashList.js.map +0 -1
- package/dist/PureComponentWrapper.d.ts +0 -22
- package/dist/PureComponentWrapper.d.ts.map +0 -1
- package/dist/PureComponentWrapper.js +0 -37
- package/dist/PureComponentWrapper.js.map +0 -1
- package/dist/__tests__/ContentContainerUtils.test.d.ts +0 -2
- package/dist/__tests__/ContentContainerUtils.test.d.ts.map +0 -1
- package/dist/__tests__/ContentContainerUtils.test.js +0 -85
- package/dist/__tests__/ContentContainerUtils.test.js.map +0 -1
- package/dist/__tests__/FlashList.test.d.ts +0 -2
- package/dist/__tests__/FlashList.test.d.ts.map +0 -1
- package/dist/__tests__/FlashList.test.js +0 -902
- package/dist/__tests__/FlashList.test.js.map +0 -1
- package/dist/__tests__/GridLayoutProviderWithProps.test.d.ts +0 -2
- package/dist/__tests__/GridLayoutProviderWithProps.test.d.ts.map +0 -1
- package/dist/__tests__/GridLayoutProviderWithProps.test.js +0 -143
- package/dist/__tests__/GridLayoutProviderWithProps.test.js.map +0 -1
- package/dist/__tests__/MasonryFlashList.test.d.ts +0 -2
- package/dist/__tests__/MasonryFlashList.test.d.ts.map +0 -1
- package/dist/__tests__/MasonryFlashList.test.js +0 -254
- package/dist/__tests__/MasonryFlashList.test.js.map +0 -1
- package/dist/__tests__/PlatformHelper.web.test.d.ts +0 -2
- package/dist/__tests__/PlatformHelper.web.test.d.ts.map +0 -1
- package/dist/__tests__/PlatformHelper.web.test.js +0 -33
- package/dist/__tests__/PlatformHelper.web.test.js.map +0 -1
- package/dist/__tests__/helpers/mountFlashList.d.ts +0 -19
- package/dist/__tests__/helpers/mountFlashList.d.ts.map +0 -1
- package/dist/__tests__/helpers/mountFlashList.js +0 -44
- package/dist/__tests__/helpers/mountFlashList.js.map +0 -1
- package/dist/__tests__/helpers/mountMasonryFlashList.d.ts +0 -18
- package/dist/__tests__/helpers/mountMasonryFlashList.d.ts.map +0 -1
- package/dist/__tests__/helpers/mountMasonryFlashList.js +0 -49
- package/dist/__tests__/helpers/mountMasonryFlashList.js.map +0 -1
- package/dist/__tests__/useBlankAreaTracker.test.d.ts +0 -2
- package/dist/__tests__/useBlankAreaTracker.test.d.ts.map +0 -1
- package/dist/__tests__/useBlankAreaTracker.test.js +0 -179
- package/dist/__tests__/useBlankAreaTracker.test.js.map +0 -1
- package/dist/benchmark/useBlankAreaTracker.d.ts +0 -34
- package/dist/benchmark/useBlankAreaTracker.d.ts.map +0 -1
- package/dist/benchmark/useBlankAreaTracker.js +0 -66
- package/dist/benchmark/useBlankAreaTracker.js.map +0 -1
- package/dist/enableNewCore.d.ts +0 -3
- package/dist/enableNewCore.d.ts.map +0 -1
- package/dist/enableNewCore.js +0 -25
- package/dist/enableNewCore.js.map +0 -1
- package/dist/errors/CustomError.d.ts +0 -8
- package/dist/errors/CustomError.d.ts.map +0 -1
- package/dist/errors/CustomError.js +0 -14
- package/dist/errors/CustomError.js.map +0 -1
- package/dist/errors/ExceptionList.d.ts +0 -24
- package/dist/errors/ExceptionList.d.ts.map +0 -1
- package/dist/errors/ExceptionList.js +0 -26
- package/dist/errors/ExceptionList.js.map +0 -1
- package/dist/errors/Warnings.d.ts +0 -9
- package/dist/errors/Warnings.d.ts.map +0 -1
- package/dist/errors/Warnings.js +0 -13
- package/dist/errors/Warnings.js.map +0 -1
- package/dist/native/auto-layout/AutoLayoutView.d.ts +0 -22
- package/dist/native/auto-layout/AutoLayoutView.d.ts.map +0 -1
- package/dist/native/auto-layout/AutoLayoutView.js +0 -48
- package/dist/native/auto-layout/AutoLayoutView.js.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.android.d.ts +0 -4
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.android.d.ts.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.android.js +0 -6
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.android.js.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.d.ts +0 -5
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.d.ts.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.ios.d.ts +0 -4
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.ios.d.ts.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.ios.js +0 -6
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.ios.js.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.js +0 -6
- package/dist/native/auto-layout/AutoLayoutViewNativeComponent.js.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponentProps.d.ts +0 -16
- package/dist/native/auto-layout/AutoLayoutViewNativeComponentProps.d.ts.map +0 -1
- package/dist/native/auto-layout/AutoLayoutViewNativeComponentProps.js +0 -3
- package/dist/native/auto-layout/AutoLayoutViewNativeComponentProps.js.map +0 -1
- package/dist/native/cell-container/CellContainer.android.d.ts +0 -6
- package/dist/native/cell-container/CellContainer.android.d.ts.map +0 -1
- package/dist/native/cell-container/CellContainer.android.js +0 -9
- package/dist/native/cell-container/CellContainer.android.js.map +0 -1
- package/dist/native/cell-container/CellContainer.d.ts +0 -8
- package/dist/native/cell-container/CellContainer.d.ts.map +0 -1
- package/dist/native/cell-container/CellContainer.ios.d.ts +0 -6
- package/dist/native/cell-container/CellContainer.ios.d.ts.map +0 -1
- package/dist/native/cell-container/CellContainer.ios.js +0 -9
- package/dist/native/cell-container/CellContainer.ios.js.map +0 -1
- package/dist/native/cell-container/CellContainer.js +0 -11
- package/dist/native/cell-container/CellContainer.js.map +0 -1
- package/dist/native/cell-container/CellContainer.web.d.ts +0 -7
- package/dist/native/cell-container/CellContainer.web.d.ts.map +0 -1
- package/dist/native/cell-container/CellContainer.web.js +0 -13
- package/dist/native/cell-container/CellContainer.web.js.map +0 -1
- package/dist/specs/AutoLayoutNativeComponent.d.ts +0 -18
- package/dist/specs/AutoLayoutNativeComponent.d.ts.map +0 -1
- package/dist/specs/AutoLayoutNativeComponent.js +0 -6
- package/dist/specs/AutoLayoutNativeComponent.js.map +0 -1
- package/dist/specs/CellContainerNativeComponent.d.ts +0 -8
- package/dist/specs/CellContainerNativeComponent.d.ts.map +0 -1
- package/dist/specs/CellContainerNativeComponent.js +0 -6
- package/dist/specs/CellContainerNativeComponent.js.map +0 -1
- package/dist/utils/ContentContainerUtils.d.ts +0 -27
- package/dist/utils/ContentContainerUtils.d.ts.map +0 -1
- package/dist/utils/ContentContainerUtils.js +0 -48
- package/dist/utils/ContentContainerUtils.js.map +0 -1
- package/dist/viewability/ViewToken.d.ts.map +0 -1
- package/dist/viewability/ViewToken.js.map +0 -1
- package/dist/viewability/ViewabilityHelper.d.ts.map +0 -1
- package/dist/viewability/ViewabilityManager.d.ts.map +0 -1
- package/dist/viewability/ViewabilityManager.js.map +0 -1
- package/ios/RNFlashList.xcodeproj/project.pbxproj +0 -3
- package/ios/RNFlashList.xcodeproj/project.xcworkspace/contents.xcworkspacedata +0 -4
- package/ios/Sources/AutoLayoutView.swift +0 -294
- package/ios/Sources/AutoLayoutViewComponentView.h +0 -16
- package/ios/Sources/AutoLayoutViewComponentView.mm +0 -90
- package/ios/Sources/AutoLayoutViewManager.mm +0 -14
- package/ios/Sources/AutoLayoutViewManager.swift +0 -12
- package/ios/Sources/CellContainerComponentView.h +0 -18
- package/ios/Sources/CellContainerComponentView.mm +0 -62
- package/ios/Sources/CellContainerManager.mm +0 -8
- package/ios/Sources/CellContainerManager.swift +0 -12
- package/ios/Sources/FlatListPro-Bridging-Header.h +0 -11
- package/ios/Tests/AutoLayoutViewTests.swift +0 -113
- package/src/FlashList.tsx +0 -953
- package/src/GridLayoutProviderWithProps.ts +0 -180
- package/src/MasonryFlashList.tsx +0 -476
- package/src/PureComponentWrapper.tsx +0 -42
- package/src/__tests__/ContentContainerUtils.test.ts +0 -130
- package/src/__tests__/FlashList.test.tsx +0 -1001
- package/src/__tests__/GridLayoutProviderWithProps.test.ts +0 -179
- package/src/__tests__/MasonryFlashList.test.ts +0 -292
- package/src/__tests__/PlatformHelper.web.test.ts +0 -45
- package/src/__tests__/helpers/mountFlashList.tsx +0 -62
- package/src/__tests__/helpers/mountMasonryFlashList.tsx +0 -70
- package/src/__tests__/useBlankAreaTracker.test.tsx +0 -206
- package/src/benchmark/useBlankAreaTracker.ts +0 -117
- package/src/enableNewCore.ts +0 -24
- package/src/errors/CustomError.ts +0 -10
- package/src/errors/ExceptionList.ts +0 -28
- package/src/errors/Warnings.ts +0 -15
- package/src/native/auto-layout/AutoLayoutView.tsx +0 -73
- package/src/native/auto-layout/AutoLayoutViewNativeComponent.android.ts +0 -7
- package/src/native/auto-layout/AutoLayoutViewNativeComponent.ios.ts +0 -7
- package/src/native/auto-layout/AutoLayoutViewNativeComponent.ts +0 -7
- package/src/native/auto-layout/AutoLayoutViewNativeComponentProps.ts +0 -17
- package/src/native/cell-container/CellContainer.android.ts +0 -7
- package/src/native/cell-container/CellContainer.ios.ts +0 -7
- package/src/native/cell-container/CellContainer.tsx +0 -14
- package/src/native/cell-container/CellContainer.web.tsx +0 -9
- package/src/specs/AutoLayoutNativeComponent.ts +0 -24
- package/src/specs/CellContainerNativeComponent.ts +0 -9
- package/src/utils/ContentContainerUtils.ts +0 -92
- /package/dist/{viewability → recyclerview/viewability}/ViewToken.d.ts +0 -0
- /package/dist/{viewability → recyclerview/viewability}/ViewToken.js +0 -0
- /package/src/{viewability → recyclerview/viewability}/ViewToken.ts +0 -0
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<a href="https://discord.gg/k2gzABTfav">Discord</a> •
|
|
6
6
|
<a href="https://shopify.github.io/flash-list/docs/">Getting started</a> •
|
|
7
7
|
<a href="https://shopify.github.io/flash-list/docs/usage">Usage</a> •
|
|
8
|
-
<a href="https://shopify.github.io/flash-list/docs/fundamentals/
|
|
8
|
+
<a href="https://shopify.github.io/flash-list/docs/fundamentals/performance">Performance</a> •
|
|
9
9
|
<a href="https://shopify.github.io/flash-list/docs/known-issues">Known Issues</a>
|
|
10
10
|
<br><br>
|
|
11
11
|
|
|
@@ -19,25 +19,41 @@ Swap from FlatList in seconds. Get instant performance.
|
|
|
19
19
|
|
|
20
20
|
FlashList v2 has been rebuilt from the ground up for RN's new architecture and delivers fast performance, higher precision, and better ease of use compared to v1. We've achieved all this while moving to a JS-only solution! One of the key advantages of FlashList v2 is that it doesn't require any estimates. It also introduces several new features compared to v1. To know more about what's new in v2 click [here](https://shopify.github.io/flash-list/docs/v2-changes).
|
|
21
21
|
|
|
22
|
-
> ⚠️ **IMPORTANT:** FlashList v2.x has been designed to
|
|
22
|
+
> ⚠️ **IMPORTANT:** FlashList v2.x has been designed to be new architecture only and will not run on old architecture. If you're running on old architecture or using FlashList v1.x, you can access the documentation specific to v1 here: [FlashList v1 Documentation](https://shopify.github.io/flash-list/docs/1.x/).
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
## Why use FlashList?
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
### 🚀 Superior Performance
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
- No more blank cells: FlashList uses view recycling to ensure smooth scrolling without visible blank areas.
|
|
29
|
+
- Fast initial render: Optimized for quick first paint.
|
|
30
|
+
- Efficient memory usage: Recycles views instead of destroying them, reducing memory overhead.
|
|
31
|
+
- Supports view types: Great performance even if different types of components make up the list.
|
|
32
|
+
- Dynamic sizes: Super fast and doesn't need any estimates.
|
|
29
33
|
|
|
30
|
-
###
|
|
34
|
+
### 🎯 Developer Experience
|
|
31
35
|
|
|
32
|
-
|
|
36
|
+
- Drop-in replacement for FlatList: Simply change the component name - if you know FlatList, you already know FlashList.
|
|
37
|
+
- No size estimates required in v2: Unlike v1, FlashList v2 automatically handles item sizing.
|
|
38
|
+
- Type-safe: Full TypeScript support with comprehensive type definitions.
|
|
33
39
|
|
|
34
|
-
###
|
|
40
|
+
### 📱 Advanced Features
|
|
35
41
|
|
|
36
|
-
|
|
42
|
+
- Masonry layout support: Create Pinterest-style layouts with varying item heights and column spans.
|
|
43
|
+
- Maintain visible content position: Automatically handles content shifts when adding items (enabled by default in v2).
|
|
44
|
+
- Multiple recycling pools: Optimizes performance for lists with different item types using `getItemType`.
|
|
45
|
+
- Built for React Native's new architecture: FlashList v2 is designed specifically for the new architecture.
|
|
46
|
+
|
|
47
|
+
### ⚡ Real-world Benefits
|
|
48
|
+
|
|
49
|
+
- Reduced frame drops: Maintains 60 FPS even with complex item components.
|
|
50
|
+
- Lower CPU usage: Efficient recycling reduces computational overhead.
|
|
51
|
+
- Smoother scrolling: Predictable performance even with thousands of items.
|
|
52
|
+
- JS-only solution in v2: No native dependencies, making it easier to maintain while delivering fast performance.
|
|
37
53
|
|
|
38
54
|
## Installation
|
|
39
55
|
|
|
40
|
-
Add the package to your project via `yarn add @shopify/flash-list
|
|
56
|
+
Add the package to your project via `yarn add @shopify/flash-list`.
|
|
41
57
|
|
|
42
58
|
## Usage
|
|
43
59
|
|
|
@@ -67,93 +83,7 @@ const MyList = () => {
|
|
|
67
83
|
};
|
|
68
84
|
```
|
|
69
85
|
|
|
70
|
-
To avoid common pitfalls, you can also follow these steps for migrating from `FlatList
|
|
71
|
-
|
|
72
|
-
1. Simply change from `FlatList` to `FlashList` and render the list.
|
|
73
|
-
2. **Important**: Scan your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use our hook called [`useMappingHelper`](https://shopify.github.io/flash-list/docs/usage/#usemappinghelper).
|
|
74
|
-
3. Check your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for components that make use of `useState` and verify whether that state would need to be reset if a different item is passed to that component (see [Recycling](https://shopify.github.io/flash-list/docs/recycling))
|
|
75
|
-
4. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#getitemtype) prop to improve performance.
|
|
76
|
-
5. Do not test performance with JS dev mode on. Make sure you’re in release mode. `FlashList` can appear slower while in dev mode due to a small render buffer.
|
|
77
|
-
6. Memoizing props passed to FlashList is more important in v2. v1 was more selective about updating items, but this was often perceived as a bug by developers. We will not follow that approach and will instead allow developers to ensure that props are memoized. We will stop re-renders of children wherever it is obvious.
|
|
78
|
-
|
|
79
|
-
## Other things to know
|
|
80
|
-
|
|
81
|
-
- `keyExtractor` is important to prevent glitches due to item layout changes when going upwards. We highly recommend having a valid `keyExtractor` with v2.
|
|
82
|
-
- `useLayoutState`: This is similar to `useState` but communicates the change in state to FlashList. It's useful if you want to resize a child component based on a local state. Item layout changes will still be detected using `onLayout` callback in the absence of `useLayoutState`, which might not look as smooth on a case-by-case basis.
|
|
83
|
-
|
|
84
|
-
```jsx
|
|
85
|
-
import { useLayoutState } from "@shopify/flash-list";
|
|
86
|
-
|
|
87
|
-
const MyItem = ({ item }) => {
|
|
88
|
-
const [isExpanded, setIsExpanded] = useLayoutState(false);
|
|
89
|
-
const height = isExpanded ? 150 : 80;
|
|
90
|
-
|
|
91
|
-
return (
|
|
92
|
-
<Pressable onPress={() => setIsExpanded(!isExpanded)}>
|
|
93
|
-
<View style={{ height, padding: 16 }}>
|
|
94
|
-
<Text>{item.title}</Text>
|
|
95
|
-
</View>
|
|
96
|
-
</Pressable>
|
|
97
|
-
);
|
|
98
|
-
};
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
- `useRecyclingState`: Similar to `useState` but accepts a dependency array. On change of deps, the state gets reset without an additional `setState` call. Useful for maintaining local item state if really necessary. It also has the functionality of `useLayoutState` built in.
|
|
102
|
-
|
|
103
|
-
```jsx
|
|
104
|
-
import { useRecyclingState } from "@shopify/flash-list";
|
|
105
|
-
|
|
106
|
-
const GridItem = ({ item }) => {
|
|
107
|
-
const [isExpanded, setIsExpanded] = useRecyclingState(
|
|
108
|
-
false,
|
|
109
|
-
[item.id],
|
|
110
|
-
() => {
|
|
111
|
-
// runs on reset. Can be used to reset scroll positions of nested horizontal lists
|
|
112
|
-
}
|
|
113
|
-
);
|
|
114
|
-
const height = isExpanded ? 100 : 50;
|
|
115
|
-
|
|
116
|
-
return (
|
|
117
|
-
<Pressable onPress={() => setIsExpanded(!isExpanded)}>
|
|
118
|
-
<View style={{ height, backgroundColor: item.color }}>
|
|
119
|
-
<Text>{item.title}</Text>
|
|
120
|
-
</View>
|
|
121
|
-
</Pressable>
|
|
122
|
-
);
|
|
123
|
-
};
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
- `useMappingHelper`: Returns a function that helps create optimal mapping keys for items when using `.map()` in your render methods. Using this ensures optimized recycling and performance for FlashList.
|
|
127
|
-
|
|
128
|
-
```jsx
|
|
129
|
-
import { useMappingHelper } from "@shopify/flash-list";
|
|
130
|
-
|
|
131
|
-
const MyComponent = ({ items }) => {
|
|
132
|
-
const { getMappingKey } = useMappingHelper();
|
|
133
|
-
|
|
134
|
-
return (
|
|
135
|
-
<FlashList
|
|
136
|
-
data={items}
|
|
137
|
-
renderItem={({ item }) => <ItemComponent item={item} />}
|
|
138
|
-
/>
|
|
139
|
-
);
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
// When mapping over items inside components:
|
|
143
|
-
const NestedList = ({ items }) => {
|
|
144
|
-
const { getMappingKey } = useMappingHelper();
|
|
145
|
-
|
|
146
|
-
return (
|
|
147
|
-
<View>
|
|
148
|
-
{items.map((item, index) => (
|
|
149
|
-
<Text key={getMappingKey(item.id, index)}>{item.title}</Text>
|
|
150
|
-
))}
|
|
151
|
-
</View>
|
|
152
|
-
);
|
|
153
|
-
};
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
- If you're nesting horizontal FlashLists in vertical lists, we highly recommend the vertical list to be FlashList too. We have optimizations to wait for child layout to complete which can improve load times.
|
|
86
|
+
To avoid common pitfalls, you can also follow these [`steps`](https://shopify.github.io/flash-list/docs/usage#migration-steps) for migrating from `FlatList`.
|
|
157
87
|
|
|
158
88
|
## App / Playground
|
|
159
89
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var react_native_1 = require("react-native");
|
|
4
|
-
var
|
|
4
|
+
var FlashList_1 = require("./FlashList");
|
|
5
5
|
// Typecast as required
|
|
6
|
-
var AnimatedFlashList = react_native_1.Animated.createAnimatedComponent(
|
|
6
|
+
var AnimatedFlashList = react_native_1.Animated.createAnimatedComponent(FlashList_1.FlashList);
|
|
7
7
|
exports.default = AnimatedFlashList;
|
|
8
8
|
//# sourceMappingURL=AnimatedFlashList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnimatedFlashList.js","sourceRoot":"","sources":["../src/AnimatedFlashList.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AAGxC,
|
|
1
|
+
{"version":3,"file":"AnimatedFlashList.js","sourceRoot":"","sources":["../src/AnimatedFlashList.ts"],"names":[],"mappings":";;AAAA,6CAAwC;AAGxC,yCAAwC;AAExC,uBAAuB;AACvB,IAAM,iBAAiB,GACrB,uBAAQ,CAAC,uBAAuB,CAC9B,qBAAS,CACV,CAAC;AAEJ,kBAAe,iBAAiB,CAAC"}
|
package/dist/FlashList.d.ts
CHANGED
|
@@ -1,168 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { DataProvider, RecyclerListView, RecyclerListViewProps } from "recyclerlistview";
|
|
3
|
-
import GridLayoutProviderWithProps from "./GridLayoutProviderWithProps";
|
|
4
|
-
import { FlashListProps } from "./FlashListProps";
|
|
5
|
-
import { ScrollToEdgeParams } from "./FlashListRef";
|
|
6
|
-
export interface FlashListState<T> {
|
|
7
|
-
dataProvider: DataProvider;
|
|
8
|
-
numColumns: number;
|
|
9
|
-
layoutProvider: GridLayoutProviderWithProps<T>;
|
|
10
|
-
data?: ReadonlyArray<T> | null;
|
|
11
|
-
extraData?: ExtraData<unknown>;
|
|
12
|
-
renderItem?: FlashListProps<T>["renderItem"];
|
|
13
|
-
}
|
|
14
|
-
interface ExtraData<T> {
|
|
15
|
-
value?: T;
|
|
16
|
-
}
|
|
17
|
-
declare class FlashList<T> extends React.PureComponent<FlashListProps<T>, FlashListState<T>> {
|
|
18
|
-
private rlvRef?;
|
|
19
|
-
private stickyContentContainerRef?;
|
|
20
|
-
private listFixedDimensionSize;
|
|
21
|
-
private transformStyle;
|
|
22
|
-
private transformStyleHorizontal;
|
|
23
|
-
private distanceFromWindow;
|
|
24
|
-
private contentStyle;
|
|
25
|
-
private loadStartTime;
|
|
26
|
-
private isListLoaded;
|
|
27
|
-
private windowCorrectionConfig;
|
|
28
|
-
private postLoadTimeoutId?;
|
|
29
|
-
private itemSizeWarningTimeoutId?;
|
|
30
|
-
private renderedSizeWarningTimeoutId?;
|
|
31
|
-
private isEmptyList;
|
|
32
|
-
private viewabilityManager;
|
|
33
|
-
private itemAnimator?;
|
|
34
|
-
static defaultProps: {
|
|
35
|
-
data: never[];
|
|
36
|
-
numColumns: number;
|
|
37
|
-
};
|
|
38
|
-
constructor(props: FlashListProps<T>);
|
|
39
|
-
private validateProps;
|
|
40
|
-
static getDerivedStateFromProps<T>(nextProps: Readonly<FlashListProps<T>>, prevState: FlashListState<T>): FlashListState<T>;
|
|
41
|
-
private static getInitialMutableState;
|
|
42
|
-
private static getLayoutProvider;
|
|
43
|
-
private onEndReached;
|
|
44
|
-
private getRefreshControl;
|
|
45
|
-
componentDidMount(): void;
|
|
46
|
-
componentWillUnmount(): void;
|
|
47
|
-
render(): React.JSX.Element;
|
|
48
|
-
private onScrollBeginDrag;
|
|
49
|
-
private onScroll;
|
|
50
|
-
private getUpdatedWindowCorrectionConfig;
|
|
51
|
-
private isInitialScrollIndexInFirstRow;
|
|
52
|
-
private validateListSize;
|
|
53
|
-
private handleSizeChange;
|
|
54
|
-
private container;
|
|
55
|
-
private itemContainer;
|
|
56
|
-
private updateDistanceFromWindow;
|
|
57
|
-
private getTransform;
|
|
58
|
-
private separator;
|
|
59
|
-
private header;
|
|
60
|
-
private footer;
|
|
61
|
-
private getComponentForHeightMeasurement;
|
|
62
|
-
private getValidComponent;
|
|
63
|
-
private applyWindowCorrection;
|
|
64
|
-
private rowRendererSticky;
|
|
65
|
-
private rowRendererWithIndex;
|
|
66
|
-
/**
|
|
67
|
-
* This will prevent render item calls unless data changes.
|
|
68
|
-
* Output of this method is received as children object so returning null here is no issue as long as we handle it inside our child container.
|
|
69
|
-
* @module getCellContainerChild acts as the new rowRenderer and is called directly from our child container.
|
|
70
|
-
*/
|
|
71
|
-
private emptyRowRenderer;
|
|
72
|
-
private getCellContainerChild;
|
|
73
|
-
private recyclerRef;
|
|
74
|
-
private stickyContentRef;
|
|
75
|
-
private stickyOverrideRowRenderer;
|
|
76
|
-
private get isStickyEnabled();
|
|
77
|
-
private onItemLayout;
|
|
78
|
-
private raiseOnLoadEventIfNeeded;
|
|
79
|
-
private runAfterOnLoad;
|
|
80
|
-
private clearPostLoadTimeout;
|
|
81
|
-
private clearRenderSizeWarningTimeout;
|
|
82
|
-
/**
|
|
83
|
-
* Disables recycling for the next frame so that layout animations run well.
|
|
84
|
-
* Warning: Avoid this when making large changes to the data as the list might draw too much to run animations. Single item insertions/deletions
|
|
85
|
-
* should be good. With recycling paused the list cannot do much optimization.
|
|
86
|
-
* The next render will run as normal and reuse items.
|
|
87
|
-
*/
|
|
88
|
-
prepareForLayoutAnimationRender(): void;
|
|
89
|
-
scrollToEnd(params?: {
|
|
90
|
-
animated?: boolean | null | undefined;
|
|
91
|
-
}): void;
|
|
92
|
-
scrollToIndex(params: {
|
|
93
|
-
animated?: boolean | null | undefined;
|
|
94
|
-
index: number;
|
|
95
|
-
viewOffset?: number | undefined;
|
|
96
|
-
viewPosition?: number | undefined;
|
|
97
|
-
}): void;
|
|
98
|
-
scrollToItem(params: {
|
|
99
|
-
animated?: boolean | null | undefined;
|
|
100
|
-
item: any;
|
|
101
|
-
viewPosition?: number | undefined;
|
|
102
|
-
viewOffset?: number | undefined;
|
|
103
|
-
}): void;
|
|
104
|
-
scrollToOffset(params: {
|
|
105
|
-
animated?: boolean | null | undefined;
|
|
106
|
-
offset: number;
|
|
107
|
-
}): void;
|
|
108
|
-
getScrollableNode(): number | null;
|
|
109
|
-
/**
|
|
110
|
-
* Allows access to internal recyclerlistview. This is useful for enabling access to its public APIs.
|
|
111
|
-
* Warning: We may swap recyclerlistview for something else in the future. Use with caution.
|
|
112
|
-
*/
|
|
113
|
-
get recyclerlistview_unsafe(): RecyclerListView<RecyclerListViewProps, any> | undefined;
|
|
114
|
-
/**
|
|
115
|
-
* Specifies how far the first item is from top of the list. This would normally be a sum of header size and top/left padding applied to the list.
|
|
116
|
-
*/
|
|
117
|
-
get firstItemOffset(): number;
|
|
118
|
-
/**
|
|
119
|
-
* FlashList will skip using layout cache on next update. Can be useful when you know the layout will change drastically for example, orientation change when used as a carousel.
|
|
120
|
-
*/
|
|
121
|
-
clearLayoutCacheOnUpdate(): void;
|
|
122
|
-
/**
|
|
123
|
-
* Tells the list an interaction has occurred, which should trigger viewability calculations, e.g. if waitForInteractions is true and the user has not scrolled.
|
|
124
|
-
* This is typically called by taps on items or by navigation actions.
|
|
125
|
-
*/
|
|
126
|
-
recordInteraction: () => void;
|
|
127
|
-
/**
|
|
128
|
-
* Retriggers viewability calculations. Useful to imperatively trigger viewability calculations.
|
|
129
|
-
*/
|
|
130
|
-
recomputeViewableItems: () => void;
|
|
131
|
-
/**
|
|
132
|
-
* Returns the dimensions of the child container.
|
|
133
|
-
* @returns {Object} The dimensions of the child container.
|
|
134
|
-
*/
|
|
135
|
-
getChildContainerDimensions(): import("recyclerlistview").Dimension | undefined;
|
|
136
|
-
/**
|
|
137
|
-
* Returns the layout of the item at the given index.
|
|
138
|
-
* @param index - The index of the item to get the layout for.
|
|
139
|
-
* @returns {Object} The layout of the item at the given index.
|
|
140
|
-
*/
|
|
141
|
-
getLayout(index: number): import("recyclerlistview").Layout | undefined;
|
|
142
|
-
/**
|
|
143
|
-
* Returns the size of the list.
|
|
144
|
-
* @returns {Object} The size of the list.
|
|
145
|
-
*/
|
|
146
|
-
getWindowSize(): import("recyclerlistview").Dimension | undefined;
|
|
147
|
-
/**
|
|
148
|
-
* Returns the absolute last scroll offset of the list.
|
|
149
|
-
* @returns {number} The absolute last scroll offset of the list.
|
|
150
|
-
*/
|
|
151
|
-
getAbsoluteLastScrollOffset(): number;
|
|
152
|
-
/**
|
|
153
|
-
* Returns the first item offset of the list.
|
|
154
|
-
* @returns {number} The first item offset of the list.
|
|
155
|
-
*/
|
|
156
|
-
getFirstItemOffset(): number;
|
|
157
|
-
getFirstVisibleIndex(): number;
|
|
158
|
-
flashScrollIndicators(): void;
|
|
159
|
-
getNativeScrollRef(): any;
|
|
160
|
-
getScrollResponder(): any;
|
|
161
|
-
scrollToTop(params?: ScrollToEdgeParams): void;
|
|
162
|
-
computeVisibleIndices(): {
|
|
163
|
-
startIndex: number;
|
|
164
|
-
endIndex: number;
|
|
165
|
-
};
|
|
166
|
-
}
|
|
167
|
-
export default FlashList;
|
|
1
|
+
export { RecyclerView as FlashList } from "./recyclerview/RecyclerView";
|
|
168
2
|
//# sourceMappingURL=FlashList.d.ts.map
|
package/dist/FlashList.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlashList.d.ts","sourceRoot":"","sources":["../src/FlashList.
|
|
1
|
+
{"version":3,"file":"FlashList.d.ts","sourceRoot":"","sources":["../src/FlashList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,SAAS,EAAE,MAAM,6BAA6B,CAAC"}
|