React Native – Make View bigger than container View

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

I made it this way:

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

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.

Answer

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]}/>
                    </View>
      </View>
  • 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,
          zIndex:1
      },
      marginright:{
        marginRight: -20
      },
      marginleft:{
        marginLeft: -20
      }
    

Example working code: https://snack.expo.io/nbAKOYFlr

Output : screenshot