React Native – Make View bigger than container View

I need to implement such two Views: enter image description here

I made it this way:

          backgroundColor: colors.bigStone,
          height: 2,
          width: '100%',
        <View style={styles.bluePoint} />

const styles = StyleSheet.create({
  bluePoint: {
    alignSelf: 'center',
    backgroundColor: colors.bluePoint,
    borderRadius: 64,
    height: 4,
    justifyContent: 'flex-start',
    marginBottom: 2,
    width: 4,

But it looks this way: enter image description here

How can I center it? Adding margin and padding doesn’t help. As I think, my view can’t go upper of the top of its container.


Try this

 <View style={styles.container}>
            <View style={styles.separatorWrap}>
                        <View style={[styles.separator, styles.marginright]}/>
                        <Text style={styles.separatorText}><Avatar.Icon size={36} /></Text>
                        <View style={[styles.separator, styles.marginleft]}/>
  • i used react-native-paper icons you can use something else also

      container: {
      backgroundColor: "red",
      flex: 1,
      justifyContent: 'space-between',
    separatorWrap: {
          paddingVertical: 10,
          flexDirection: "row",
          alignItems: "center",
      separator: {
          borderBottomWidth: 15,
          flexGrow: 1,
          borderColor: "#8BDA9F",
      separatorText: {
          color: "#eee",
          fontSize: 13,
        marginRight: -20
        marginLeft: -20

Example working code:

Output : screenshot