Calculating height of item

This is probably related to #70; I still have an issue with calculating heights of my items using data, I used this approach where I tried to use getDataForIndex but nothing rendered on the screen:

this._layoutProvider = new LayoutProvider(
  index => {
    return "DEFAULT";
  },
  (type, dim, index) => {
    const item = this._dataProvider.getDataForIndex(index);
    if (item.media) {
      if (item.media.length > 0) {
        if (item.media.length === 1) {
          dim.width = TabletWidth;
          dim.height = 106 + (TabletWidth * (item.media.height / item.media.width));
        } else if (item.media.length === 2) {
          dim.width = TabletWidth;
          dim.height = 106 + (((TabletWidth - 20) / 2) + 8);
        } else if (item.media.length === 3) {
          dim.width = TabletWidth;
          dim.height = 106 + (((TabletWidth - 20) / 2) + (TabletWidth / 2.2) + 8);
        } else {
          dim.width = TabletWidth;
          dim.height = 106 + ((((TabletWidth - 20) / 2) + 8) * 2);
        }
      }
    }
  });

then I used this approach and it didn’t work like before:

this._layoutProvider = new LayoutProvider(
  index => {
    return "DEFAULT";
  },
  (type, dim, item) => {
    if (item.media) {
      if (item.media.length > 0) {
        if (item.media.length === 1) {
          dim.width = TabletWidth;
          dim.height = 106 + (TabletWidth * (item.media.height / item.media.width));
        }
        else if (item.media.length === 2) {
          dim.width = TabletWidth;
          dim.height = 106 + (((TabletWidth - 20) / 2) + 8);
        }
        else if (item.media.length === 3) {
          dim.width = TabletWidth;
          dim.height = 106 + (((TabletWidth - 20) / 2) + (TabletWidth / 2.2) + 8);
        }
        else {
          dim.width = TabletWidth;
          dim.height = 106 + ((((TabletWidth - 20) / 2) + 8) * 2);
        }
      }
    }
  });

I also tested this:

this._layoutProvider = new LayoutProvider(()=>{return "DEFAULT"}, (data, dim)=>{
  dim.width = TabletWidth;
  dim.height = 106 + (
    data.media ?
    data.media.length > 0 ?
    data.media.length === 1 ?
    TabletWidth * (data.media.height / data.media.width)
    : data.media.length === 2 ?
    ((TabletWidth - 20) / 2) + 8
    : data.media.length === 3 ?
    ((TabletWidth - 20) / 2) + (TabletWidth / 2.2) + 8
    :
    (((TabletWidth - 20) / 2) + 8) * 2
    : null : null
  )
});

this code only calculates 106 as the height of all items! and ignores all the conditions!

am I missing something here, how can I calculate item height based on item data?

[naqvitalha]

Few things I found wrong with the code:

1. Estimated height was 1 and it needs to be an actual estimate for optimal performance.
2. Instead of having one type called “DEFAULT” have multiple ones backed by their own components. Right now the problem is that you have one big component which renders separate stuff based on conditions why now let rowRenderer choose a component instead. You have some components with just text and if you use the same to render an image the text component will get unmounted ideally you must avoid unnecessary unmounts and promote reuse. That is the point of recycling.
3. You have lot of component level setState which I don’t think are necessary, remember they will slow things down. Also, changing things like imageLoaded1 will not re-render a component being reused incase the previous use case also had the same value. That’s how recycling works.

More that than you are getting dimensions upfront in your data source. I see thing being too complicated. Can you just try rendering a use case where only one photo is being shown? It’ll be easier for me to go through and for you to understand. Just render images, from my side I can assure you that this is a solved use case and we’ve done it before.

Your page can be much better. Reduce setState calls and break into components and add more types to LayoutProvider

[naqvitalha]

@Komeyl94 For some reason snack is not working for me. I checked multiple devices. I can look into the repo, no problem. Happy to help 😃