Как сделать галерею изображений с колонками по 2

Question

• 1000 та же строка

Это компонент ArtObject, в котором, как я предполагаю, должны быть внесены некоторые изменения

export class ArtObjectCard extends Component<Props> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View
                style={{
                    height: 240,
                    margin: 10,
                    flexDirection:"column",
                }}
            >
                <View
                    style={{
                        borderRadius: 10,
                        width: this.props.width ? this.props.width : screenWidth / 2 - 20,
                        height: this.props.height ? this.props.height : 200,
                        backgroundColor: "#fff",
                        shadowColor: "#999",
                        shadowOpacity: 0.3,
                        shadowRadius: 5,
                        shadowOffset: {
                            height: 1,
                            width: 0
                        }
                    }}
                >
                    <Image
                        borderRadius={10}
                        source={this.props.image}
                        style={{
                            width: this.props.width ? this.props.width : screenWidth / 2 - 20,
                            height: this.props.height ? this.props.height : 200,
                            resizeMode: "cover"
                        }}
                    />




                    <Text
                        style={{
                            width: 150,
                            fontSize: 12,
                            color: "#bbb",
                            marginTop: 5,
                            marginBottom: 10
                        }}
                    >

                    </Text>

                </View>
            </View>
        );
    }
}

И я вызов компонента ArtObject в методе рендеринга

    renderItem = ({item, index}) => {

        if (!item) {
            return null
        }


        return (
            <View >
                <ArtObjectCard
                    title={item.title}

                    image={{uri: item.image}}

                    onClickButton={()=>{this._onPressItem(item)}}
                />

            </View>
        );
    }




    render(){
        const { search } = this.state;


        return (

            <View style={{flex: 1}}>

                <SearchBar
                    placeholder="Type something here...."
                    onChangeText={this.updateSearch}
                    value={search}
                />

                <FlatList
                    data={this.state.objects}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}

                />
            </View>
        );
    }

EDIT 1:

После добавления numColumns = {2} в плоский список он работает, только если у меня есть более двух изображений для отображения. Если у меня только 2 изображения, это будет пустой экран