ListView wont execute onEndReached when onScroll handler is added to its ScrollView

Here is the use case (v 0.41.2):

<ListView
    style={{flex:1}}
    onEndReached={() => alert('Ok, I\'m @ the bottom')}
    renderScrollComponent={(props) => {
        return <ScrollView 
            style={{flex:1}} 
            scrollEventThrottle={50} 
            onScroll={(e) => console.log('I\'m scrolling')}
            />
    }}
    />

I’m not adding all the other props that ListView and ScrollView have but sure thing they are not causing the issue. As soon as onScroll is removed, everything works as expected. This is either a bug, or a missing documentation on how to implement onScroll and not capturing the event.

Update: After some digging in the RN source, I understand the problem. As soon as you add your own onScroll prop to the scroll view, the RN’s one, which owns the logic around onEndReached is overwritten and therefore the ListView’s callback wont work. It could be fixed very easily by the RN team if they add onScroll prop to the ListView itself and execute that callback from their ScrollView’s onScroll implementation.

So, if you want onEndReached and access to the onScroll event at the same time, you have to implement it yourself.

It will be very nice if the RN team expose all the callback props related to scrolling in the ListView and bubble them from the ScrollView’s.

Update 2: There is a way! Create a reference to your ListView component and then inside your onScroll handler just do the following:

// IMPORTANT: Using private methods is not usually a good practive but...
this.listView._onScroll(e); // Call RN's default prop handler

[janicduplessis]

If you put onScroll on the ListView directly instead of the ScrollView it should work.

[janicduplessis]

Feel free to send a PR to make it clearer 😃, closing this since it has been resolved.