Recyclerlistview: How to define dynamic LayoutProvider

[nehacurefit]

I am trying to define layout provider where type is basically coming in data source, so how can i define layout provider to take layout type when data source is updated. Sample code of my requirement is:
this.layoutProvider = new LayoutProvider( index => { return this.getDataSource()[index].widgetType }, (type, dim) => { dim.width = width; dim.height = height; } );

[maxfarseer]

@nehacurefit when you receive new Data, you can access it inside componentWillReceiveProps (or getDerivedPropsFromState). After - you can setup new layout provider, and after you can setup new data provider. Is it works for you?

const DataSourceFactory = () =>
  new DataProvider((r1, r2) => {
    return r1 !== r2;
  });

const LayoutProviderFactory = results => {
  return new LayoutProvider(
    index => {
      const searchItem = results[index];
      if (!searchItem) {
        return 'unknown';
      }
      return searchItem.layoutType;
    },
    (type: SearchItemLayout, dim) => {
      switch (type) {
        case SEARCH_ITEM_LAYOUT_TYPES.Cover:
          dim.width = SEARCH_SIDEBAR_WIDTH;
          dim.height = SEARCH_ITEM_COVER_HEIGHT;
          break;
        case SEARCH_ITEM_LAYOUT_TYPES.Match:
          dim.width = SEARCH_SIDEBAR_WIDTH;
          dim.height = SEARCH_ITEM_HEIGHT;
          break;
        default:
          dim.width = 0;
          dim.height = 0;
      }
    }
  );
};
...
class ResultList extends React.Component<Props, State> {
  _layoutProvider: LayoutProvider;
  _dataProvider: DataProvider;

  constructor(props: Props) {
    super(props);

    const searchResults = this.props.preparedSearchResults;
    this._dataProvider = DataSourceFactory();
    this._layoutProvider = LayoutProviderFactory(searchResults);

    this.state = {
      dataProvider: this._dataProvider.cloneWithRows(searchResults),
    };
  }
...
...
componentWillReceiveProps(nextProps) {
    if (this.props.preparedSearchResults !== nextProps.preparedSearchResults) {
      const searchResults = nextProps.preparedSearchResults;
      this._dataProvider = DataSourceFactory();
      this._layoutProvider = LayoutProviderFactory(searchResults);

      this.setState(prev => ({
        ...prev,
        dataProvider: this._dataProvider.cloneWithRows(searchResults),
      }));
    }
  }
...
render() {
    const {
      initialRenderIndex,
      preparedSearchResults,
    } = this.props;

    return (
      <View style={styles.root}>
        <RecyclerListView
          canChangeSize
          layoutProvider={this._layoutProvider}
          dataProvider={this.state.dataProvider}
          rowRenderer={this._rowRenderer}
          initialRenderIndex={initialRenderIndex}
        />
      </View>
    );
  }

@naqvitalha is it correct behaviour? (because I have some problems here, related to my previous bug with initialRenderIndex)

[nehacurefit]

Thanks @maxfarseer for help

[jdpagley]

@maxfarseer THANK YOU SO MUCH FOR THIS Example!!!! I know this is from 2018 but this just helped me solve a problem that I've been wracking my brain over.. You're the man! 🦾 😁 👍🏽

[maxfarseer]

@jdpagley happy new 2021 👯