No layout available for index: 0

I’m seeing errors coming through in Bugsnag that seem to be from my implementation of RecyclerListView. The error says No layout available for index: 0. I can’t seem to reproduce it myself but I know that it’s causing some of my users pain. As far as I know I’ve set up everything correctly, but maybe I’m missing something. Here’s the applicable code from my component.

// different layout types
enum layoutStyle {
  GRID = 'Grid',
  LIST = 'List',
}

  // starting up the component
  constructor(props: Props) {
    super(props);

    this.dataProvider = new DataProvider(
      (p1: Adult | Student, p2: Adult | Student) => {
        return (
          p1.uniqueidentifier !== p2.uniqueidentifier ||
          p1.firstName !== p2.firstName ||
          p1.lastName !== p2.lastName
        );
      }
    );

    this.state = {
      layout: layoutStyle.GRID,
    };

    const pageWidth = Dimensions.get('window').width;
    const columnCount = Math.floor(pageWidth / Person.minTileWidth);
    const gridWidth = Math.floor(pageWidth / columnCount);

    this.layoutProvider = new LayoutProvider(
      () => this.state.layout,
      (
        type: layoutStyle,
        dim: {
          width: number;
          height: number;
        }
      ) => {
        switch (type) {
          case layoutStyle.GRID:
            dim.width = gridWidth;
            dim.height = 96;
            break;
          case layoutStyle.LIST:
            dim.width = Dimensions.get('window').width;
            dim.height = 70;
            break;
          default:
            dim.width = 0;
            dim.height = 0;
        }
      }
    );
  }

        // in the render function
        <RecyclerListView
          layoutProvider={this.layoutProvider}
          dataProvider={this.dataProvider.cloneWithRows(people)}
          rowRenderer={this.rowRenderer}
          renderAheadOffset={200}
          extendedState={this.state}
          ref={(ref: RecyclerListView) => {
            if (ref) {
              this.listViewRef = ref;
            }
          }}
        />

From the error message it sounds like my LayoutProvider instance may not be configured correctly, but I went back through and reviewed the demo code in this repo and it looks like it should work fine to me.

Any help on this would be appreciated. Thanks!

[devilyard]

I’m facing the same problem now, in my case, the error happens when loaded with some rows first, then reload without any data for the list, then the error will be shown.

[jasonmerino]

Today I finally got around to dealing with this error. My solution is not ideal, but it works.

Right before rendering the RecyclerListView component I check to make sure that the items I’m trying to render are greater than 0. If the length of my array of items is 0 I just render an empty View component instead of the RecyclerListView. Not ideal, but it seems to do the trick in my situation.