React Native FlatList with columns, Last item width

Question

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

Answer 1

You can use ListFooterComponent={this.renderFooter}

Answer 2

The reason for it is your Card have style flex: 1, so it will try to expand all the space remain. You can fix it by add maxWidth: '50%' to your Card style

<View style={{ flex: 1, margin: 5, backgroundColor: '#ffffd', height: 130, maxWidth: '50%'}} ></View>

Answer 3

just use flex:0.5 and width:'50%'

Answer 4

This is the cleanest way to style a FlatList with columns and spaced evenly:

    <FlatList style={{margin:5}}
        numColumns={2}                  // set number of columns 
        columnWrapperStyle={style.row}  // space them out evenly
        
        data={this.state.items}
        keyExtractor={(item, index) => item.id }
        renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
    />       

    const style = StyleSheet.create({
        row: {
            flex: 1,
            justifyContent: "space-around"
        }
    });

Answer 5

@Emilius Mfuruki suggestion is good, but if you have text with varying length it doesn't work perfectly. Then use this width inside your item view:

const {height, width} = Dimensions.get('window');
const itemWidth = (width - (MarginFromTheSide * 2 + MarginInBetween * (n-1))) / n;

In FlatList use:

columnWrapperStyle={{
            flex: 1,
            justifyContent: 'space-evenly',
          }}

Works perfectly.

Answer 6

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 -

First link

Second link

Third link _{Link Broken}

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