React Native Circular Cutout

Asked by At

I am trying to create a circular cutout in React Native, something similar to the image below where the light grey is transparent.

cutout

I can successfully duplicate this design using absolute positioning and fixed background colours but am unsure of how I would go about making the cutout around the image at the top transparent?

1 Answers

0
Jaydeep Galani On

You can set position:"absolute" to image view, and set its position accordingly.

Try this,

  <View
    style={{
      height:400,
      justifyContent: 'center',
      marginTop: 100,
    }}>
    <View
      style={{
        backgroundColor: 'grey',
        height: 80,
        width: 80,
        alignSelf: 'center',
        borderRadius: 40,
        borderColor: '#FFFFFF',
        borderWidth: 10,
        position: 'absolute',
        top: -40,
        zIndex: 1,
        alignItems:"center",
        justifyContent:"center"
      }}
    >
    <Text>Image</Text></View>
    <View
      style={{
        height: 400,
        margin: 20,
        backgroundColor: 'grey',
        borderRadius: 40,
      }}
    ></View>
  </View>

see working expo example here