Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#104: Convert onEndReachedThreshold from pixels to ratio #148

Merged
merged 4 commits into from
Mar 11, 2022
Merged

#104: Convert onEndReachedThreshold from pixels to ratio #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4cfbd6d
Upgrade recyclerlistview to 3.1.0-beta.6
ElviraBurchik Mar 10, 2022
099486f
Pass onEndReachedThreshold prop
ElviraBurchik Mar 10, 2022
35d6641
Update after PR comments
ElviraBurchik Mar 11, 2022
b723a03
Fix the version of recyclerlistview in readme
ElviraBurchik Mar 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Check out [the Vault project](https://vault.shopify.io/projects/22845) to learn

### Adding a package to your project

Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.5`, and run pod install in the `ios` directory.
Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.6`, and run pod install in the `ios` directory.

Note that [`recyclerlistview`](https://github.com/Flipkart/recyclerlistview) is a peer dependency of `@shopify/flash-list`

Expand Down
2 changes: 1 addition & 1 deletion documentation/docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Check out [the Vault project](https://vault.shopify.io/projects/22845) to learn

### Adding a package to your project

Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.5` and run `pod install` in the `ios` directory.
Add the package to your project via `yarn add @shopify/flash-list recyclerlistview@3.1.0-beta.6` and run `pod install` in the `ios` directory.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

README.md should also be updated


:::note
[`recyclerlistview`](https://github.com/Flipkart/recyclerlistview) is a peer dependency of `@shopify/flash-list`.
Expand Down
14 changes: 5 additions & 9 deletions documentation/docs/known-issues.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,22 @@ This is something that hasn't been implemented yet. It will be part of the first

It's not implemented yet but will be part of final release.

### 4) `onEndReachedThreshold` value isn't working

Please note that value accepted is in dp/px and not a multiplier to window size. Please make the change accordingly. We will address this in the future.

### 5) `onEndReached` event doesn't have `distanceFromEnd`
### 4) `onEndReached` event doesn't have `distanceFromEnd`

This value is reported as 0. We don't have plans to implement this right now. Please provide feedback if this is important to you.

### 6)`scrollToIndex` doesn't have `offset` support
### 5)`scrollToIndex` doesn't have `offset` support

The list only guarantees to bring the given index in view port (as close to the top as possible). There is no support for additional customization.

### 7) `renderItem` callback doesn't have all features
### 6) `renderItem` callback doesn't have all features

As of now we only provide relevant data and index. No plans to change this.

### 8) `viewability` related callbacks are missing
### 7) `viewability` related callbacks are missing

We are planning to add a version of this but we can't guarantee if it will be exactly same a `FlatList`.

### 9) Horizontal lists do not change height to match tallest child
### 8) Horizontal lists do not change height to match tallest child

As of now, horizontal lists need a fixed height. It's not possible to resize it based on height of the tallest child item. This is because children have absolute positions and cannot expand the parent. This is something we will address in the future. Please provide feedback if this is important to you. Using `onLayout` to measure and resize is a possible workaround but it can cause visible movement on screen.
6 changes: 3 additions & 3 deletions fixture/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,9 +356,9 @@ PODS:
- React-Core
- SDWebImage (~> 5.11.1)
- SDWebImageWebPCoder (~> 0.8.4)
- RNFlashList (0.1.0):
- RNFlashList (0.2.1):
- React-Core
- RNFlashList/Tests (0.1.0):
- RNFlashList/Tests (0.2.1):
- React-Core
- RNGestureHandler (2.2.0):
- React-Core
Expand Down Expand Up @@ -582,7 +582,7 @@ SPEC CHECKSUMS:
ReactCommon: 57b69f6383eafcbd7da625bfa6003810332313c4
ReactNativePerformanceListsProfiler: 68334bc2a688cdd6762dcf0a71fe9f84abdfa0c9
RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7
RNFlashList: 7060ac139635ea64b9af68243c3671a870e7f7bd
RNFlashList: 2c3c0fed6997ec5f462627e5126246200c45681a
RNGestureHandler: bf572f552ea324acd5b5464b8d30755b2d8c1de6
RNScreens: d6da2b9e29cf523832c2542f47bf1287318b1868
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
Expand Down
2 changes: 1 addition & 1 deletion fixture/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"react-native-gesture-handler": "^2.3.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.13.1",
"recyclerlistview": "3.1.0-beta.5"
"recyclerlistview": "3.1.0-beta.6"
},
"devDependencies": {
"babel-plugin-module-resolver": "^4.1.0",
Expand Down
8 changes: 4 additions & 4 deletions fixture/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4041,10 +4041,10 @@ recast@^0.20.3:
source-map "~0.6.1"
tslib "^2.0.1"

recyclerlistview@3.1.0-beta.5:
version "3.1.0-beta.5"
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.5.tgz#ef379cc51f4e73d1ccae68b5b95f459b3d665a98"
integrity sha512-9s75KHbOxuSejAS76Th8tSW1youTHQXnJR+oI1rYoesaHqie3JdvQZww6akinydSAJ4s0SeMto2pTq1IiapYSQ==
recyclerlistview@3.1.0-beta.6:
version "3.1.0-beta.6"
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.6.tgz#b92d2daae6d871efe7f500da1064a58175832516"
integrity sha512-qfhvhgDQYfQHC5FhNsiztpF7yeI7tD3Dj58xrlSOXrDSoUJVvctrtX2hmV0ytLkPdHCnGkSpr9HbeRK/rR29Gw==
dependencies:
lodash.debounce "4.0.8"
prop-types "15.5.8"
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@babel/runtime": "*",
"react": "*",
"react-native": "*",
"recyclerlistview": "3.1.0-beta.5"
"recyclerlistview": "3.1.0-beta.6"
},
"devDependencies": {
"@babel/core": "^7.17.5",
Expand All @@ -40,7 +40,7 @@
"metro-react-native-babel-preset": "^0.69.0",
"react": "17.0.2",
"react-native": "0.66.4",
"recyclerlistview": "3.1.0-beta.5",
"recyclerlistview": "3.1.0-beta.6",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are multiple readme files where version is referenced. Search all and change. It's there in install steps too.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you do a search-and-replace for this change? There are other places where recyclerlistview version is mentioned and they have not been changed (for example in documentation)

"typescript": "^4.6.2"
},
"jest": {
Expand Down
9 changes: 1 addition & 8 deletions src/FlashList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
LayoutChangeEvent,
ViewStyle,
ColorValue,
Dimensions,
} from "react-native";
import {
DataProvider,
Expand Down Expand Up @@ -304,12 +303,6 @@ class FlashList<T> extends React.PureComponent<

const finalDrawDistance = drawDistance === undefined ? 250 : drawDistance;

// TODO: Wait for #104 (https://github.com/Shopify/flash-list/issues/104) to be fixed and remove this. Temp workaround
const endDetectionThreshold =
(horizontal
? Dimensions.get("window").width
: Dimensions.get("window").height) * (onEndReachedThreshold || 0);

return (
<StickyHeaderContainer
overrideRowRenderer={this.stickyRowRenderer}
Expand Down Expand Up @@ -338,7 +331,7 @@ class FlashList<T> extends React.PureComponent<
renderItemContainer={this.itemContainer}
renderContentContainer={this.container}
onEndReached={this.onEndReached}
onEndReachedThreshold={endDetectionThreshold || undefined}
onEndReachedThresholdRelative={onEndReachedThreshold || undefined}
extendedState={this.state.extraData}
layoutSize={estimatedListSize}
maxRenderAhead={3 * finalDrawDistance}
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6673,10 +6673,10 @@ recast@^0.20.3:
source-map "~0.6.1"
tslib "^2.0.1"

recyclerlistview@3.1.0-beta.5:
version "3.1.0-beta.5"
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.5.tgz#ef379cc51f4e73d1ccae68b5b95f459b3d665a98"
integrity sha512-9s75KHbOxuSejAS76Th8tSW1youTHQXnJR+oI1rYoesaHqie3JdvQZww6akinydSAJ4s0SeMto2pTq1IiapYSQ==
recyclerlistview@3.1.0-beta.6:
version "3.1.0-beta.6"
resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-3.1.0-beta.6.tgz#b92d2daae6d871efe7f500da1064a58175832516"
integrity sha512-qfhvhgDQYfQHC5FhNsiztpF7yeI7tD3Dj58xrlSOXrDSoUJVvctrtX2hmV0ytLkPdHCnGkSpr9HbeRK/rR29Gw==
dependencies:
lodash.debounce "4.0.8"
prop-types "15.5.8"
Expand Down