Flatlist - onEndReached fails to trigger, because "distanceFromEnd" has negative value

[RosenTomov]

Issue Description

Infinite scrolling fails to trigger most of the time on iOS and rarely on Android, because the distanceFromEnd returned to the Flatlist's onEndReached function is a negative number. You have to scroll slowly to trigger onEndReached.

https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/MessageContainer.tsx#L319

distanceFromEnd > 0 is the culprit. To go around this, we've patched the package to remove that check.

Steps to Reproduce / Code Snippets

Enable infinite scrolling and scroll up (inverted by default).

Expected Results

To trigger onEndReached, when the end of the screen is reached.

Additional Information

• Nodejs version: 12.18.3
• React version: 16.13.1
• React Native version: 0.63.2
• react-native-gifted-chat version: react-native-gifted-chat
• Platform(s) (iOS, Android, or both?): Tested on both:
  • iOS:
  • v13.6 simulator & device
  • Android:
  • v10 emulator
  • v9 device
• TypeScript version: none

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[doelgonzo]

This appears to still be occurring. Seems odd to have that check in there at all. Is there a reason around it?

[RosenTomov]

Looks like this was marked as "wontfix", here's what you'll need to patch it yourself:

• "patch-package" from npm
• See the set-up and usage section in their docs (tl;dr edit the package's code in node_modules, run a command with it's name and it will generate a patch with the changes).

Here's the file it generated for me in the patches folder (in root), you can try using it directly filename: react-native-gifted-chat+0.16.3.patch

diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
index 193772a..004eca7 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -172,7 +172,6 @@ export default class MessageContainer extends React.PureComponent {
         this.onEndReached = ({ distanceFromEnd }) => {
             const { loadEarlier, onLoadEarlier, infiniteScroll, isLoadingEarlier, } = this.props;
             if (infiniteScroll &&
-                distanceFromEnd > 0 &&
                 distanceFromEnd <= 100 &&
                 loadEarlier &&
                 onLoadEarlier &&

If the package gets updated and code there remains the same, just rename the patch, for example 0.16.3 -> 0.16.4 react-native-gifted-chat+0.16.4.patch