nested recyclerlistview: contextprovider for individual rows being reused

EDIT: reproduced with an expo snack that appears to be related to standard usage, more so than my particular usage: https://snack.expo.io/BJ2CHQRVm

ORIGINAL: Currently working with a nested recyclerlistview, similar to this project. The difference is that the horizontal and vertical recyclerlistsviews are paginated, meaning their data sources must be updated periodically.

The way I’m currently doing this is to construct the dataproviders and contextproviders for each child row in the parent component. The issue is that the context provider doesn’t seem to pass down correctly in props. When recycling large lists, the context provider reuses the context provider from other uniqueIds. This results in a very unfun scrolling experience - as horizontal scroll positions are not preserved when the component is recycled.

Parent dataprovider:

    this.dataProvider = new DataProvider((r1, r2) => {
      return r1.userId !== r2.userId;
    });

Constructing object for each row for the parent dataProvider:

  getDataForRow = uniqueId => {
    let contextProvider;
    if (this._childrenContextProviders[uniqueId]) {
      contextProvider = this._childrenContextProviders[uniqueId];
    } else {
      this._childrenContextProviders[uniqueId] = new ContextHelper(uniqueId);
      contextProvider = this._childrenContextProviders[uniqueId];
    }

    let dataProvider;
    if (this._childrenDataProviders[uniqueId]) {
      dataProvider = this._childrenDataProviders[uniqueId];
    } else {
      this._childrenDataProviders[uniqueId] = new DataProvider((r1, r2) => {
        return r1 !== r2;
      });
      dataProvider = this._childrenDataProviders[uniqueId];
    }

    return {
      uniqueId: uniqueId,
      contextProvider,
      dataProvider,
    };
  };

Then my renderRow() function looks as follows:

  _rowRenderer = (type, data) => {
    if (data.userId === 'header') {
      return this.renderListHeader();
    }

    return (
      <CellComponent
        uniqueId={data.uniqueId}
        contextProvider={data.contextProvider}
        dataProvider={data.dataProvider}
      />
    );
  };

[naqvitalha]

It is working fine @alexpareto. Problem is with your log statement

   this.list.scrollToOffset(
          this.props.getCachePosition(this.props.uniqueId),
          0,
          false
        );
  console.log(
          'scrolled from ',
          this.props.getCachePosition(prevProps.uniqueId),
          'to',
          this.list.getCurrentScrollOffset(),
          'supposed to scroll to',
          this.props.getCachePosition(this.props.uniqueId)
        );

Given scrollToOffset is asynchronous this.list.getCurrentScrollOffset() wouldn’t have updated by the time you are logging it. Same is true with DataProvider change.

If I wrap the log part in double rAF it works fine. Check: https://snack.expo.io/B1B0YU-HX

[alexpareto]

Ah yes, you’re right! good catch. Thanks for the help + the component.