Why my items are not centered ?

[shop-fluencer]

Current behavior

Why my items are not centered ? And how can I center it ?

Expected behavior

I want to center my items

To Reproduce

  <View style={s.flex}>
     { data && data.length > 0 && !isFetching ?
      <FlashList
        data={data}
        keyExtractor={(item, i) => item.user_id.toString()}
        renderItem={renderItem}
        estimatedItemSize={225}
        numColumns={2}
        contentContainerStyle={{paddingTop: 16}}
      />
</View>

....
  flex: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%'
  },

Platform:

• [ x ] iOS
• [ x ] Android

Environment

1.3.1 flashlist version

[timoisalive]

I was surprised about this too.

The contentContainerStyle does not accept width or maxWidth, which I used together with centerContent on FlatList. That was enough to achieve scrolling at full width, but the actual list being narrower and centered in the available area.

[gperez-eth]

Did you find a workaround?

[BalogunofAfrica]

You can try out my solution

#804 (comment)