question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

renderItem is not being called after switching from FlatList

See original GitHub issue

I’ve installed BigList and followed the ‘Migrate from FlatList’ guide, after which the component looks like this:

console.log('about to try to use biglist'); // This shows up
<BigList
    data={item}
    renderItem={(item) => {
        console.log('WITHIN RENDERITEM'); // This never shows up in console
        return <MenuListItem 
            food={item.item} 
            navigation={this.props.navigation} 
            onItemPress={() => { 
                this.props.dispatch(loadCurrentMenuItem('fooditem', item.item));
                this.props.navigation.navigate('ViewFoodItem', {
                    fid: item.item.id
                });
            }}
        />
    }}
    itemHeight={50}//swapped out the const just to show the current value
    keyExtractor={(item, index) => index.toString()}
/>

No items are rendered and that console.log() within the renderItem function never shows up.

If I switch back to FlatList and remove the itemHeight property everything is displayed properly again.

In the migration guide it specifically says “The main props of FlatList are compatible with BigList like data”. Are there exceptions to that? Does it not extend to renderItem and I need to download the examples to see how the needs of that have changed?

I should also ask since this is mentioned on the front page: ‘When list can’t render your items fast enough the non-rendered components will appear as blank space.’ Since I am currently experiencing this problem with categories further down my list being blank, will BigList do anything to fix that or will it have the same problems FlatList has? I saw another issue elsewhere mention that they were still having the same blank space issues while using this plugin.

Thanks.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
captainvaruncommented, Mar 21, 2022

Same issue over here.

I was able to resolve the issue by downgrading to version 1.5.0 and also by adding a height of 100% to the view above BigList.

1reaction
captainvaruncommented, Mar 8, 2022

Same issue over here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReactNative Flatlist - RenderItem not working - Stack Overflow
Reason is that, every object in the data array is referenced through item property of the actual parameter passed to renderItem function.
Read more >
FlatList - React Native
FlatList. A performant interface for rendering basic, flat lists, supporting the most handy features: Fully cross-platform.
Read more >
Displaying a List in React Native: Map Method or FlatList ...
The FlatList component requires two props: data and renderItem. A data prop takes an array of data that needs to be rendered, and...
Read more >
A deep dive into React Native FlatList - LogRocket Blog
Sample usage · The Item component will accept two props: title and description . · The renderItem function will render the Item component...
Read more >
How to use the FlatList Component — React Native Basics
There are two primary props you need to know about in a FlatList and that's data and renderItem. The first is an array...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found