0

I am trying to make item tiles and want to have even gap between two items like this..

Android

As we can see, this is not happening in IOS

IOS

My Code:

<ScrollView
    horizontal
    scrollEnabled={false}
    style={{ paddingHorizontal: constVal.containerPaddingHorizontal, overflow: 'hidden' }}>
  <FlatList
    data={data}
    numColumns={2}
    nestedScrollEnabled={true}
    scrollEnabled={false}
    columnWrapperStyle={{ width: '100%', justifyContent: 'space-between' }}
    renderItem={({ item, separators, index }) => (
      <Pressable
        key={item.id}
        onPress={() => {
          navigation.navigate('ProductDetail', { id: item.id })
        }}
      >
        <ProductCard
          item={item}
        />
      </Pressable>
    )}
  />
</ScrollView>

I have set the width of the columnWrapper same as ScrollView and added space between the 2 columns.

Android Inspector

IOS Inspector

Darshan Rumalwala
  • 1
  • Does this answer your question? [How to create two columns with space beetwen in react native - flatList](https://stackoverflow.com/questions/43344912/how-to-create-two-columns-with-space-beetwen-in-react-native-flatlist) – user18309290 Jan 29 '23 at 16:30
  • You can also use ItemSeparatorComponent in the FlatList to render your space between items – Abe Jan 30 '23 at 03:44
  • Thanks! But why this is not working in ios but same code works for android? – Darshan Rumalwala Feb 01 '23 at 04:18

0 Answers0