title: BorderBottom added top of the view React Native
body: <p>I want to add a border to the bottom of the <code>&lt;View&gt;</code> (like <code>&lt;hr&gt;</code>) for that reason i added that code to my style:</p>
  <pre><code>export default function Chat() {
    return (
      &lt;View&gt;
        &lt;View style={styles.inner}&gt;
          &lt;CircleCard /&gt;
          &lt;CircleCard /&gt;
          &lt;CircleCard /&gt;
          &lt;CircleCard /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    inner: {
      width: &quot;100%&quot;,
      height: &quot;85%&quot;,
      flexDirection: &quot;row&quot;,
      flexWrap: &quot;wrap&quot;,
      flex: 1,
      borderBottomColor: &quot;black&quot;,
      borderBottomWidth: 1,
    },
  });
  </code></pre>
  <p>But this code draw the border to top of the  instead of Bottom.</p>
  <p>Also The CircleCard component:</p>
  <pre><code>export default function CircleCard() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Image
          style={styles.imageStyle}
          source={require(&quot;../assets/games/Among-us.png&quot;)}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: { width: 60, height: 60, margin: 5, marginTop: 10 },
    imageStyle: {
      width: &quot;100%&quot;,
      height: &quot;100%&quot;,
      overflow: &quot;hidden&quot;,
      resizeMode: &quot;stretch&quot;,
      borderRadius: 140,
    },
  });
  </code></pre>
  <p>How can I fix it?</p>
  <p>Note: I added a negative marginTop to my styles.inner but than when i add a new component all page broken.</p>
  <p><a href="https://i.stack.imgur.com/fvHhD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fvHhD.png" alt="Image" /></a></p>
  <p>Here is what i want to make:</p>
  <p><a href="https://i.stack.imgur.com/cOmvN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cOmvN.png" alt="Image" /></a></p>