onEndReached property of ListView not working when ListView is placed inside scrollview

Question

I am developing a sample app in that I placed Listview in a ArticleList component and placed inside the Scrollview to scroll the entire page along with header when scrolling the Listview, I am trying to load ten records everytime when list reaches at the end, using onEndReached method.But it automatically onEndReached function fires even though the list is at top level or didn't scrolled.

   <ScrollView>
    <View>
     <Image style={{width:windowSize.width,height:windowSize.height/8.2,
             bottom:0,position:'absolute'}}
            source={require('../images/cloud.png')}/>
    </View>
    <View>
      <ArticleList
        navigator={this.props.navigator}
        userId={this.state.userId}
        modalClose={this.modalClose.bind(this)}
        sendSpinner={this.getSpinner.bind(this)}
       />
    </View>
   </ScrollView>

If Listview is not placed inside the scrollview the issue is not getting, but I have to scroll the entire page along with ListView.Can anyone guide me how to solve this Issue.Best Solutions are Appreciated Thanks.

Answer 1

Generally speaking it's not a good practice to put a scroll inside a scroll when both are in the same direction (both vertical/both horizontal).

When placing the ListView inside a ScrollView, you're actually allowing the list to grow indefinitely, because the wrapping scroll-view allows the content to keep growing. The list loads the first batch of data, then "sees" that more room is available - so more content is loaded until your whole list data is loaded. It's as if you didn't use a list at all - just a scroll-view with a really large content (ListView has no recycling).

You can remove the ScrollView container and use the renderHeader prop of the list to render your header; it will scroll along with your list. Alternatively you can switch to using a FlatList and use the ListHeaderComponent prop.