Wrong initial render in responsive SectionGrid

[Ian Martorell]

SectionGrid takes the full width of the screen by default, and we can use the staticDimension prop to specify a smaller width, but I want my grid to be responsive , so I added alignSelf: stretchto its styles. This works great, but it causes some jumping around and clipped views when it renders initially.

Any idea how to get around this?

Full width:

Using alignSelf: stretch:

[saleel]

Is this after applying staticDimension? And align stretch style was applied to item or the whole gridview? Can you provide sample code of what you have in expo or some editor?

[Ian Martorell]

This happens when not using staticDimension. I was using alignSelf: stretch because my parent container has alignItems: center, but the behavior is the same if you omit both of them, since alignItems: stretch is the default. The idea is I want my grid to resize responsively like so:

Here's the snack!

You can tell there's some flickering when the grid first loads. It's not as obvious as in my project since this example is way lighter:

If you uncomment the line for staticDimension, the flickering no longer happens, but then the grid wouldn't be responsive. 😢

[saleel]

By default the the grid renders the items with full window width, but when onLayout is applied after render, the maxWidth (from style) comes in and the grid adjust items to the available width. This is why you see the flicker.

staticDimension was introduced to have a fixed width for the container and not to be responsive based on available device width.

From what I understood, what you want is something like maxDimension - where we still make the grid responsive to the window width but we will cap the maximum width to the maxDimension value.
I have updated the snack here - https://snack.expo.io/@saleel/super-grid-flexbox

This require changes in SecionGrid itself. So you can take a fork and make the changes in your branch. Try it out and let me know.

We can also add this to the master branch if there are valid use cases for this prop. Can you share your use case?
What do you do with the space left on either side of the grid when the window width is more than the maxDimension?

[Ian Martorell]

I see! I think maxDimension would definitely solve it for me. Let me fork the repo and try to make the changes. My use case is that I'm using React Native Web to generate a web version of my app, and I want it to be fully responsive and usable on computers. That's why I need to constrain the layout to a maxWidth, or it would look horrible on maximized browser windows. Expo is becoming very platform agnostic with web, electron support and so on, and this library works flawlessly on web, so I think it's a good idea to continue supporting any and all platforms!