Grid with lot of data is broken after navigating back to the screen

[siarheipashkevich]

Hi, all.

Could anybody please assist how I can avoid this behavior?

Screen with lot of data:

If I move to checkout screen and back to previous screen with grid, I can see broken grid after moving and after some time is it ok:

My grid params:

<FlatGrid
    ref={flatGridRef}
    style={{ paddingTop: 0 }}
    data={products}
    renderItem={renderItem}
    keyExtractor={getGridItemUniqueKey}
    ListEmptyComponent={<EmptyProductsPlaceholder />}
  />

Thanks.

[saleel]

That is strange. One reason I could see this happening is when itemDimension is not passed correctly to FlatGrid. In your case I believe it will be the default 120 which should be always there.

Is it happening when you open the component for the first time? Also is it happening when you change orientation from landscape to portrait?

Can you setup a demo here - https://snack.expo.io/ ...with same settings and possible the same size of the data.

[siarheipashkevich]

I have reactnavigation library with drawer navigator and two screens products where I use grid with 500+ items and 'checkout'. When I open the products screen first time everything renders correctly, but when I navigating to checkout screen and going back to products screen then I see broken grid for a short period of time.

[saleel]

I understand, can you share the code in expo so I can debug. Something is delaying the calculation of the correct value of grids. Or the component containing the grid is re-rendering multiple times.

[siarheipashkevich]

https://snack.expo.io/@esupldevelopers/react-navigation-5-boilerplate

Please try on the web or slow devices because on my iPhone 12 it is fast but I see this broken.

[saleel]

I have checked and the reason is FlatGrid's onLayout is triggered with 0 height and 0 width, when you go to checkout screen. When you come back onLayout is triggered again with correct width which trigger a recalculation. This is probably because of the navigation/drawer library you are using. I believe the FlatGrid component is still rendering in the background with 0 width and height when you are on other view.

As a reasonable hack, you can pass staticDimension prop. If staticDimension is passed, then onLayout is skipped.

Like this: staticDimension={Dimensions.get('window')['width']}

With this, FlatGrid will always use full width of the window and wont check the layout width. If you want your app to work both in landscape and portrait mode, then you might need pass staticDimension dynamically using onLayout callback in your component.

[siarheipashkevich]

@saleel thanks a lot. How do you think is it correct if I'll use https://reactnative.dev/docs/usewindowdimensions and pass windowWidth to staticDimension props for correct work on ios, android and web with responsive?

[saleel]

Yes, from what I read, this should do work well.

[siarheipashkevich]

@saleel thank you! 👍