BorderBottom added top of the view React Native

Question

I want to add a border to the bottom of the <View> (like <hr>) for that reason i added that code to my style:

export default function Chat() {
  return (
    <View>
      <View style={styles.inner}>
        <CircleCard />
        <CircleCard />
        <CircleCard />
        <CircleCard />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  inner: {
    width: "100%",
    height: "85%",
    flexDirection: "row",
    flexWrap: "wrap",
    flex: 1,
    borderBottomColor: "black",
    borderBottomWidth: 1,
  },
});

But this code draw the border to top of the instead of Bottom.

Also The CircleCard component:

export default function CircleCard() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.imageStyle}
        source={require("../assets/games/Among-us.png")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: 60, height: 60, margin: 5, marginTop: 10 },
  imageStyle: {
    width: "100%",
    height: "100%",
    overflow: "hidden",
    resizeMode: "stretch",
    borderRadius: 140,
  },
});

How can I fix it?

Note: I added a negative marginTop to my styles.inner but than when i add a new component all page broken.

Here is what i want to make:

Answer 1

Working app : Expo Snack

import * as React from 'react';
import { View, StyleSheet, Image } from 'react-native';

export default function Chat() {
  return (
    <View>
      <View style={styles.inner}>
        <CircleCard />
        <CircleCard />
        <CircleCard />
        <CircleCard />
      </View>
    </View>
  );
}

function CircleCard() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.imageStyle}
        source={{
          uri:
            'https://www.graphicpie.com/wp-content/uploads/2020/11/red-among-us-png-1684x2048.png',
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 60,
    height: 60,
    margin: 5,
    marginTop: 10,
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 30,
  },
  imageStyle: {
    width: '100%',
    height: '100%',
    overflow: 'hidden',
    resizeMode: 'stretch',
    borderRadius: 140,
  },
  inner: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'wrap',
    /**
     * i guess "rgba(21,21,21,0.2)" looks better than then plain "black"
     * borderBottomColor: "rgba(21,21,21,0.2)",
     */
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  },
});