Items in list overlapping

[ricohumme]

Hi,

I have found that when rendering items it sometimes happens that the items are overlapping due to the fact the container is not growing. When reverting back to FlatList these issue do not occur, Have these issues already been found by someone?

A code example where this occurs:

<FlatGrid
      style={styles.container}
      contentContainerStyle={{ flexGrow: 1 }}
      data={recipes}
      keyExtractor={(recipe) => recipe.id.toString()}
      renderItem={({ item: recipe }) => (
        <View style={{paddingHorizontal: 24}}>
          <RecipeCard recipe={recipe} large={true} />
        </View>
      )}
      itemDimension={isMobileDisplay ? 320 : 238}
      additionalRowStyle={[{ alignItems: "baseline" }]}
      {...props}
    />

const styles = StyleSheet.create({
  container: {
    width: "100%",
  },
  items: {
    width: "100%",
    minWidth: 238,
    minHeight: 400,
    justifyContent: "space-between",
    flex: 1,
  },
});

If anything else is required, please let me know. Thanks a bunch in advance.

[saleel]

I believe its some of the styles causing the issue. Can you try removing flex: 1 from items and adding it to container?

If that don't solve the issue, can you create an expo snack reproducing the issue?

[saleel]

Btw, is this happening when you rotate the device? And once this happen does it go away immediately or stay like this?

[ricohumme]

Hi,

I tried both with and without flex. Initially I thought flex would resolve the issue, but it didn’t sadly. the device’s orientation is portrait and is not setup for landscape. But I am supporting web with this application as well so that is why I chose this component. I’ll try and setup a snack example tomorrow with some data sets. Fyi, I haven’t been able to reproduce this issue yet on web, just on mobile viewports (also including web using devtools)

[ricohumme]

Goodmorning! I successfully created a reproducible snack which I could not get to fail on web, but immediately on iOS and Android. I created a couple of dataset which you can switch through.

https://snack.expo.dev/@ricohumme/flatgrid-demo

[saleel]

I removed additionalRowStyle={[{ alignItems: "baseline" }]} prop and it looks fine in both iOS and Web - snack. Is that style really needed?

[ricohumme]

Thanks for that very quick reply! It seems odd that this would trigger it, but I needed that alignment for the browser when display the cards next to each other. Without it, the cards would not align correctly and be all over the place. What would be your take on that ?

[ricohumme]

I could ofcourse use my variable isMobileDisplay to choose a different alignment, but I'm just curious as to why this would break it. Or maybe I just don't understand the alignItems style correctly

[saleel]

I am not sure if I understand. This is how it looks in the web for me

[saleel]

Oh, I think I get you. In order for the items to align horizontally you can specify something like height: 500 in the View styles.

renderItem={({ item: recipe }) => (
        <View style={{paddingHorizontal: 24, height: 500 }}>
          <RecipeCard recipe={recipe} large={true} />
        </View>
)}

I am not 100% sure why that style you passed earlier rendered like that in mobile devices.

[ricohumme]

This could be me trying to find the issue and passing heights in places where it should not be needed. But I am glad this resolved my issue: I now have additionalRowStyle={[{ alignItems: isMobileDisplay ? "center" : "baseline" }]} which actually works as I want it to.