CODEWITHSUNDEEP
listviewreact-native
Irvan
Irvan

Reputation: 175

React Native ListView onEndReached doesn't called

I want to implement infinite scroll so I do this in my ListView tag

renderRow(data){
    return (
        <CardSection>
            <Text>
                {data.id}
            </Text>
        </CardSection>
    );
}

<ListView 
    dataSource={this.dataSource}
    renderRow={this.renderRow}
    onEndReached = {this.loadMoreNews.bind(this)}
    pageSize = {5}
/>

I get 5 data every fetch action that I call in loadMoreNews() and componentWillMount. Because the first 5 data doesn't fill the entire screen I expected that onEndReached to be called automatically since it already in the end of the ListView, but it doesn't.

I tried to style the Text tag in renderRow into this

renderRow(data){
    return (
        <CardSection>
            <Text style={{height:100}}>
                {data.id}
            </Text>
        </CardSection>
    );
}

and it works as i want. I'm afraid that my renderRow won't fill the entire screen if my aplication is running in the wide screen device.

Is it the behavior of ListView or I missed something? What is the solution? I don't really want to force my component to be very big so it always fill the entire screen.

Upvotes: 2

Views: 1215

Answers (2)

Hariks
Hariks

Reputation: 1889

You could compare component contentsize with height of the device and call loadMoreNews fn.

const deviceHeight = Dimensions.get('window').height;

<ListView 
   dataSource={this.dataSource}
   renderRow={this.renderRow}
   onLayout={(event) => {
      var layout = event.nativeEvent.layout;
      if(layout.height < deviceHeight) this.loadMoreNews()
   }}
   onEndReached = {this.loadMoreNews.bind(this)}
   pageSize = {5}
/>

Upvotes: 1

eden
eden

Reputation: 6103

onEndReached?: function

Called when all rows have been rendered and the list has been scrolled to within onEndReachedThreshold of the bottom. The native scroll event is provided.

It won't be automatically called unless user swipes the listview (wide screen scenario).

You may set a threshold to trigger onEndReached without reaching the bottom end of the screen.

onEndReachedThreshold: number

Threshold in pixels (virtual, not physical) for calling onEndReached.

Alternatively, you can manually call loadMoreNews() when your screen isn't fully covered by rows. To do so, just measure the height of the CardSection component, and divide Dimensions.get('window').height to that, which gives you number CardSection components that can fit into the current screen.

If your rows don't have a fixed height that you can know, you may use onLayout function.

Upvotes: 1

Related Questions