React Native not re-rendering Listview

Question

So I am new to React Native and I am building this app with redux and react-navigation. Here's the problem:

I am fetching records from API, things were working fine. While I fetch records there's a Loading icon then after that the Listview display the records, then when there are no records I display a No record found. Text. Then suddenly the records just stop displaying, the Loading icon just keep on displaying when there are records but when there's no record the Text displays.

What could have caused this bug? I am using Expo so I print to console the fetched records and there are records. Also after the data get fetched I put a console.log in render function and it is called which means it just don't render the Listview.

Thanks in advance!

UPDATE

So i've used FlatList as suggested below and i've found that the item passed from FlatList is undefined which is again strange cause when I print the data I passed on the list it has contents. Here is my current code:

MyFlatlist

return <FlatList
  data={data} //an array of objects
  renderItem={this._renderItem} //console prints undefined
/>

//I also tried
return <FlatList
  data={data} //an array of objects
  renderItem={({item}) => this._renderItem(item)} //I think this doesn't call the method cause it doesn't print anything on the console.
/>

MyRenderItem

_renderItem = ({item}) => {
  console.log(item)
}

FINAL UPDATE

So there were two factors that caused this problem, first the API where I get my data changed which result to fields that I access in my view isn't there anymore, React Native see this as error and as a result the rendering stops without an error msg which is why it is hard to detect. Second, when I used FlatList, the per item sent to the renderItem function is also under an object which has a property item that contains the actual data so the rendering stops again.

This is fixed now as far as my setup is concerned. Thanks for all your help!

Show us some code please, there's a lot of different things that could be wrong. — Matt Aft
– Matt Aft, Commented Dec 16, 2017 at 1:18
Ah yeah sorry, I couldn't show any code, assuming everything is in place, cause as i've said it just suddenly didn't work I didn't even touch the code, what are other factors that could affect this? — Jed
– Jed, Commented Dec 16, 2017 at 1:28
Ah so it was working then it stopped without any changes? I haven't really used expo but maybe try closing everything and stop any packagers running and try running it again. — Matt Aft
– Matt Aft, Commented Dec 16, 2017 at 1:36
Yeah, I already did that and restarted the PC, still the same. — Jed
– Jed, Commented Dec 16, 2017 at 1:45

skylerfenn · Accepted Answer · 2017-12-23 16:54:16Z

1

I’ve come across the ListView not re-rendering before.

From the docs:

The rowHasChanged function provided to the data source tells the ListView if it needs to re-render a row because the source data has changed - see ListViewDataSource for more details.

ListView was DEPRECATED though. See https://facebook.github.io/react-native/docs/listview.html. Try using FlatList or SectionList. More about it from this article.

edited Dec 23, 2017 at 16:54

answered Dec 16, 2017 at 2:11

skylerfenn

3543 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jed Over a year ago

Hi, still wasn't successful, i've edited my question though.

skylerfenn Over a year ago

Try the handle from the docs? facebook.github.io/react-native/docs/flatlist.html <FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => <Text>{item.key}</Text>} />

Jed Over a year ago

I updated my question again, it was my fault after all. Sorry for the troubles :)

Collectives™ on Stack Overflow

React Native not re-rendering Listview

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related