Creating Circular Avatars and Clipped Elements

In this lesson, you will learn how to transform square images and containers into perfectly circular UI elements using border-radius and overflow clipping.

The Geometry of a Circle

In React Native, creating a circle is purely a mathematical application of the borderRadius property. If you have a square View or Image (meaning the width and height are equal), setting the borderRadius to half of that dimension will force the corners to curve until they meet, resulting in a perfect circle.

For example, if your avatar is 100x100 pixels, a borderRadius of 50 turns it into a circle.

Handling Content Overflow

Sometimes, simply applying borderRadius isn't enough, especially if you have images or child elements that bleed outside the bounds of your container. This is where overflow: 'hidden' becomes essential. When you set this property on a parent container, any child content that extends beyond the defined border radius is "clipped" or masked to match that shape.

Here is how you would implement a standard circular avatar:

const styles = StyleSheet.create({
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50, // Half of width/height
    overflow: 'hidden', // Clips the image to the circle
  },
});

// Usage
<View style={styles.avatar}>
  <Image 
    source={{ uri: 'https://example.com/profile.jpg' }} 
    style={{ width: 100, height: 100 }} 
  />
</View>

Why Use overflow: 'hidden'?

Without overflow: 'hidden', a square image placed inside a container with a borderRadius might still show its sharp corners overlapping the container's rounded edges. By clipping the parent, you ensure that the image strictly adheres to the circular mask you’ve created. This pattern is foundational for maintaining a polished, native feel in your profile screens and list items.

Key Takeaway: To create a perfect circle, set a borderRadius equal to half your container’s side length and always apply overflow: 'hidden' to ensure child content respects the circular boundary.