renderItem is not being called after switching from FlatList

[bmcn99]

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.

[lamlengend98]

@marcocesarato

[afkcodes]

yeah i am facing the same issue the items are not being rendered just a blank screen

[allemanfredi]

i have the same problem and on my side renderEmpty is always called even if data is not empty.

[labtorie]

double check the name of your data variable, maybe try to rename it because the mess of item variables may be the problem

[bmcn99]

The variable names were correct in my example there, and worked in the original FlatList (Aside from the blank space issue with items towards the bottom of the list). I think in the end we increased the SectionList initialNumToRender property from the default of 10 to a higher amount. The SectionList was using FlatLists for its sections. I was worried it would increase memory usage and introduce a new problem that way but we haven't seen any issues from it.

[afkcodes]

@marcocesarato can you have a look at this please i want to use this but this issue keeps me out.

[labtorie]

@bmcn99 can you please provide the data structure you use as the 'data' prop?

[allemanfredi]

@labtorie i just tried with [1,2,3,4,5] and renderItem is not called yet. Just renderEmpty is called.

[captainvarun]

Same issue over here.

[allemanfredi]

@marcocesarato any news here?

[captainvarun]

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.

[Sir-hennihau]

struggling with the same issue, makes the library unusable unfortunately. any news on this? id really like to use the package otherwise

[scriptlabs]

The reason for an empty component in my case was the missing height on the parent element of my BigList.

Solution was to add a <View> with 100% height around the <BigList> component.

<View style={{height: '100%'}}>
  <BigList ... />
</View>