How to fix styles in FlashList?

[balloman]

I'm currently using a regular flatlist and was looking to possibly use FlashList as a drop in replacement, but I can see it's not that easy, because the styles for a flatlist don't match up at all. I have this very simple grid image view, that I was using a flat list for, and it plainly doesn't work with a FlashList.

Code:

const styles = StyleSheet.create({
  ROOT: {
    flex: 1,
  },
  images: {
    aspectRatio: 1,
    margin: "1%",
    width: "31%"
  },
});


export interface ImageCardGroupProps {
  images: ImageSourcePropType[]
}

/**
 * Describe your component here
 */
export const ImageCardGroup = observer(function ImageCardGroup(props: ImageCardGroupProps) {

  const renderItem = ({item}: {item: ImageSourcePropType}) => {
    return (
      <Image source={item} resizeMode={"cover"} style={styles.images}/>
    )
  }

  return (
    <FlashList data={props.images} renderItem={renderItem} numColumns={3} style={styles.ROOT} />
  )
})

Now the expected behavior is that I get a neat gride with 3 columns that all more or less take 33% of the screen. However, what I get instead is just 3 small left aligned pictures. So instead of this:

, when I swap to a FlashList, I instead get this

Why is that?

[naqvitalha]

I think you just need to remove width: "31%" from your image style. FlatList wraps three items in one while FlashList treats them as individual items and you resize by overriding spans. This is when numColumns > 1

[balloman]

Yeah, I figured that might be the issue, and had already tried this but didn't put that in my original post, my bad. This is what happens when I do that.

Changing the resizeMode also doesn't really seem to affect the issue unless I change the mode to center, where instead the image seems to become centered around some anchor off of the screen like this

[naqvitalha]

I'm not sure. If you provide an expo snack I can check.
We've tried to make migration simple but it won't always be a direct swap. You should try just fixing it instead of focusing on making the same styles work.
This layout is pretty straightforward. flex 1 and aspect ratio 1 should give you what you want.

[balloman]

I see, thank you! I was able to get it to work by adding "flex: 1" to the style for my image.

const styles = StyleSheet.create({
  images: {
    aspectRatio: 1,
    flex: 1,
    margin: "1%",
  },
});


export interface ImageCardGroupProps {
  images: ImageSourcePropType[]
}

/**
 * A component to display a group of images in a three column grid
 */
export const ImageCardGroup = observer(function ImageCardGroup(props: ImageCardGroupProps) {

  const renderItem = ({item}: {item: ImageSourcePropType}) => {
    return (
      <Image source={item} resizeMode={"cover"} style={styles.images}/>
    );
  }

  return (
    <FlashList data={props.images} renderItem={renderItem} numColumns={3} />
  );
});