title: How to display cards in two columns in React Native?
body: <p>I have this code that makes cards but it only displays three cards and does not display the fourth card and it does not display cards in 2 columns. 
  Is there any way to change a code a bit so that it can display cards in 2 columns and display all cards? I have tried squeaking the code by changing Stylesheet.create with different options but due to lack of knowledge and experience, I cannot implement it.</p>
  
  <pre><code>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(
              &lt;ScrollView&gt;
              &lt;View style = {styles.container}&gt;
                  &lt;Card
                      image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}&gt;
                      &lt;Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}&gt;
                          $299.99
                      &lt;/Text&gt;
                      &lt;AntDesign style={{flexDirection:'row', justifyContent:'flex-end'}} name="hearto" size={30} color="black" /&gt;
                      &lt;Text&gt;
                          Grey Suit
                      &lt;/Text&gt;
                  &lt;/Card&gt;
                  &lt;Card
                      image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}&gt;
                      &lt;Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}&gt;
                          $299.99
                      &lt;/Text&gt;
                      &lt;AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" /&gt;
                      &lt;Text&gt;
                          Grey Suit
                      &lt;/Text&gt;
                  &lt;/Card&gt;
                  &lt;Card
                      image={{uri:('https://simages.ericdress.com/Upload/Image/2018/14/watermark/99e027f5-1e4f-4b77-93d2-827e0c2db2e7.jpg')}} style ={styles.item}&gt;
                      &lt;Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}&gt;
                          $299.99
                      &lt;/Text&gt;
                      &lt;AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" /&gt;
                      &lt;Text&gt;
                          Grey Suit
                      &lt;/Text&gt;
                  &lt;/Card&gt;
                  &lt;Card
                      image={{uri:('https://www.mrmunro.co.uk/wp-content/uploads/2018/08/Cavani-Tommy-Three-Piece-Suit-Worn.jpg')}} style ={styles.item}&gt;
                      &lt;Text style={{marginBottom: 10, fontWeight:"bold", flexDirection:'row', justifyContent:'flex-start'}}&gt;
                          $299.99
                      &lt;/Text&gt;
                      &lt;AntDesign style={{flexDirection:'row',justifyContent:'flex-end'}} name="hearto" size={30} color="black" /&gt;
                      &lt;Text&gt;
                          Grey Suit
                      &lt;/Text&gt;
                  &lt;/Card&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
          )
      }
  
  }
  
  export default App;
  
  const styles = StyleSheet.create({
      container:{
            flexDirection: 'row',
            alignContent:'stretch',
  
      },
      item:{
  
        width: '50%'
      }
  })
  
  
  
  
  </code></pre>