ReactNative recyclerlistview Space between items is increasing or overlapping

953 Views Asked by At

I am working on android application using ReactNative RecyclerListView For displaying list of items in my app. Please check my recyclerlistview code in render function.

<RecyclerListView rowRenderer={_renderRow} dataProvider={_dataProvider}
        layoutProvider={_layoutProvider}
        canChangeSize={true}
        forceNonDeterministicRendering={true}
        keyExtractor={(item, index) => String(index)}
        extraData={selectedItem}/>

And following is the _layoutProvider logic.

const _layoutProvider = new LayoutProvider((i) => {
    return _dataProvider.getDataForIndex(i)._id;
  }, (_id, dim) => {

    dim.width = width;
    dim.height = height / 1.7;
  });
  _renderRow.bind(this);

If i used fixed height, The UI display is not same in all resolutions. I have used forceNonDeterministicRendering attribute. But the problem is when i am going from this screen and coming back to this screen, Item gap is getting increased. If i reduce height in layoutProvider, bottom of the item is overlapping by next item. Please check the screenshots for reference.

Space is increased between two items When first time rendering its working good without any issues. Please help me to resolve this issue. Thanks in advance..

0

There are 0 best solutions below