title: How to place 2 cards per row with flex
body: <p>I'll provide images of what I'm trying to perform:</p>
  
  <p>One that is how I want it to be and one that shows the problem, finally I'll show the code. </p>
  
  <p>First image (how I want it to be):</p>
  
  <p><a href="https://i.stack.imgur.com/m8qAI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8qAI.png" alt="What I want"></a></p>
  
  <p>Second image (how it looks when I have a third card)</p>
  
  <p><a href="https://i.stack.imgur.com/imOwD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/imOwD.png" alt="The problem"></a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;ScrollView&gt;
      &lt;View style={{ padding: 10 }}&gt;
          &lt;View style={{ paddingTop: '5%' }}&gt;&lt;/View&gt;
          &lt;View style={{ flexDirection: 'row', justifyContent: 'space-between' }}&gt;
  
              {this.state.subjects.map(subject =&gt; {
                  return (
                      &lt;View key={subject.id}&gt;
                          &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('ViewSubject', { id: subject.id })}&gt;
                              &lt;ImagedCarouselCard
                                  width={180}
                                  height={180}
                                  text={subject.name}
                                  shadowColor="#051934"
                                  source={{
                                      uri: "http://site.test/" + subject.icon,
                                  }}
                              /&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                  )
              })}
          &lt;/View&gt;
          &lt;View style={{ paddingTop: '2%' }}&gt;&lt;/View&gt;
      &lt;/View&gt;
  &lt;/ScrollView&gt;
  </code></pre>