Search code examples
react-nativereact-native-flatlist

React Native FlatList with columns, Last item width

I'm using a FlatList to show a list of items in two columns

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

The card component is just a view with some styles:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

It is working fine, but if the number of items is odd, the last row only contains one item and that item stretches to the full width of the screen.

How can I set the item to the same width of the others?

enter image description here

Solution

  • Theres a few things you can try here.

    A) Setting a pre-defined width for the card ( Maybe equal to the height you've set? ). Then you can use alignItems in order to have the card positioned in the middle or on the left - Unsure as to which you wanted here.

    B) If there are an even number of cards, you could add an empty View at the end in order to fill this space. I find this method pretty clunky but useful when trying to leave space for future elements.

    C) Simply use alignItems: 'space-between, i like to use this to center items, but you would have to define the width, or use something like flex:0.5

    I suggest researching more into flexbox to help you with this, as it is hard to tell the context of this situation. I'm assuming the above methods will help, but if not, here are some links for you to look at -

    A Complete Guide to Flexbox (CSS Tricks)

    Layout with Flexbox (React Native)

    Video Tutorial (Youtube) Link Broken

    Hope this helps. If you need any further clarification - just ask