RecyclerListView needs to have a bounded size

[erizocosmico]

Hi, I've been trying to use this component following the example in the README but it gives me the following error:

RecyclerListView needs to have a bounded size. Currently height or, width is 0

If I comment these lines it works perfectly:

recyclerlistview/src/core/RecyclerListView.tsx

Lines 326 to 328 in 77d4791

	if (layout.height === 0 || layout.width === 0) {
	throw new CustomError(RecyclerListViewExceptions.layoutException);
	}

I've logged the values of layout and this._layout and they are {height: 0, width: 0} and {width: 414, x: 0, height: 0, y: 0}` respectively.

The only particularity of my usage is the RecyclerListView is on a TabNavigator. Any idea why this might be happening?

The code of my app is here in case you might want to take a look (it's ReasonML, though :( ) https://github.com/erizocosmico/myfosdem/blob/feature/recyclerlistview/re/components/eventList.re#L90-L140

[naqvitalha]

Same as #89 and #74 check if those answers clear it up for you.

[AnandKuhar]

I m facing the same issue. But if i give RecyclerListView's parent container fixed height and width it shows starting two three images, even if i gave its parent container height to be equal to deviceHeight. It also Distort my css when using with card

[naqvitalha]

@AnandKuhar Can you give me a sample on codesandbox.io? The problem is body is not auto stretched on web. And RLV containers by default enable flex on child. If you give me the sample I will help you out.

[ashokkumar88]

wrap the <RecyclerListView /> inside <View style={{flex:1}}> </View> like below:

<View style={{flex:1}}>
<RecyclerListView />
 </View>

[peteroid]

@naqvitalha Just wonder if I can add style={{ minHeight: 1, minWidth: 1 }} to hot fix this error?

[naqvitalha]

@peteroid In that case estimated no of items to mount will be computed incorrectly. In future we plan to add layoutParam prop where you can provide layout for RLV to use rather than waiting for mount. That will fix it.

[peteroid]

@naqvitalha Is there any way we can catch this error gracefully? By throwing out the error, our app would crash directly. Can we have a prop like onLayoutError and then render nothing to the view after setting a prop like notThrowError={true}?

[cmcaboy]

I was able to fix this error by adding in {minHeight: 1, minWidth: 1} and removing the following 2 properties from my container:

justifyContent: 'center',
alignItems: 'center',

[lharinarayanan]

I tried all of these but still am unable to fix this

[lharinarayanan]

<View style={{minHeight: 1, minWidth: 1}}>
<RecyclerListView
layoutProvider={this._layoutProvider}
dataProvider={this.state.dataProvider}
rowRenderer={this._rowRenderer}

                                // style={{height:650,width:300}}
                            />

This is my code when i run this the browser hangs and continues to load indefinitely

[AE0011]

i managed it with this:
{ this.state.data.length > 0 && <RecyclerListView />}
consider that type of data is array

[gbferreira]

I add

<View style={{ minHeight: 1, minWidth: 1 }}> 
     <RecyclerListView ... />
</View>

[naqvitalha]

Closing due to inactivity.

[ziaulrehman40]

I think there should be a clear example for cases where we need an infinite list within a view that is rendering some other elements as well, is not a common case is mobile but is a lot common in web.
There are bunch of items being rendered say on left, and there is a list on right, if page scrolls to bottom, the list on right must fetch new data detecting scroll and everything.

I am currently struggling to achieve this.

[Bohra98]

After adding

<View style={{minWidth:1,minHeight:1}}> <RecyclerListView rowRenderer={this._rendetItem.bind(this)} dataProvider={datprovider} layoutProvider={layoutProvider}/> </View>
It show me this error
TypeError: undefined is not an object (evaluating 'itemRect.y')

[felix-lambert]

I still have the same problem. And when I put <View style={{minWidth:1,minHeight:1}}> My item list is not centered. When I try to center it, it doesn't work anymore. How can I center my items without getting this error?

[msvargas]

In my case i have the prop canChangeSize enable, if you disable, fixed error

[muhammad786]

Hi All,

I was also facing this issue, settled through the following way

Basically, I was using

import { SafeAreaView } from 'react-native-safe-area-context';

so I think safe area view bounds calculation takes some time and meanwhile RLV throw the error, by changing Safeareaview with "useSafeAreaInsets" hook it works fine.

Thanks!

[ebhdeveloper]

<RecyclerListView
style={{ width: responsiveWidth(100), height: responsiveHeight(100) }}
/>
It worked for me

[sobanfly]

@naqvitalha Just wonder if I can add style={{ minHeight: 1, minWidth: 1 }} to hot fix this error?

Oh thanks man you saved me.

[Dr-RayLight]

this is work for me :

  <RecyclerListView
       style={{ width: '100%', minHeight: 1 }} // set this
       canChangeSize={true} // set this
       layoutProvider={this._layoutProvider}
       dataProvider={this.state.dataProvider.cloneWithRows(this.state.yoursourceDataArray)}
       rowRenderer={this._rowRenderer}
       useWindowScroll={true}
     />

[joaolvcas]

<View style={{minHeight: 1, minWidth: 1}}> <RecyclerListView layoutProvider={this._layoutProvider} dataProvider={this.state.dataProvider} rowRenderer={this._rowRenderer}

                                // style={{height:650,width:300}}
                            />

This is my code when i run this the browser hangs and continues to load indefinitely

thats work for me:

          <RecyclerListView
            style={{ height: '100%', width: width - 50 }}
            dataProvider={activities}
            rowRenderer={renderActivity}
            layoutProvider={layoutProvider}
          />