Comment afficher des cartes sur deux colonnes dans React Native?

J'ai ce code qui fait des cartes mais il n'affiche que trois cartes et n'affiche pas la quatrième carte et il n'affiche pas les cartes en 2 colonnes. Existe-t-il un moyen de modifier un peu un code pour qu'il puisse afficher les cartes en 2 colonnes et afficher toutes les cartes? J'ai essayé de grincer le code en changeant Stylesheet.create avec différentes options mais en raison d'un manque de connaissances et d'expérience, je ne peux pas l'implémenter.

import React from 'react'
import { Card, ListItem, Button, Icon } from 'react-native-elements';
import {ScrollView, StyleSheet, Text,Image, TouchableOpacity, View} from 'react-native';
import { Ionicons, AntDesign } from '@expo/vector-icons';
class App extends React.Component{
render(){
        return(
            <ScrollView>
            <View style = {styles.container}>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                <Card
                    image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}>
                    <Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}>
                        $299.99
                    </Text>
                    <AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" />
                    <Text>
                        Grey Suit
                    </Text>
                </Card>
                </View>
            </ScrollView>
        )
    }

}

export default App;

const styles = StyleSheet.create({
    container:{
          flexDirection: 'row',
          alignContent:'stretch',

    },
    item:{

      width: '50%'
    }
})