Overflow with border-radius does not work correctly in react-native

Question

I have implemented the following but overflow: hidden does not work. border-radius should work as a wall.

const App = () => {
  return (
    <View style={styles.container} >
      <View style={styles.itemContainer}>
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
        <View style={styles.item} />
      </View>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    position: "absolute", top: 200, right: 20, width: 200, height: 200, borderColor: "red", borderWidth: 1, backgroundColor: "#ff0", borderBottomEndRadius: 200
  },
  itemContainer: {
    flexDirection: "row", flexWrap: "wrap", overflow: "hidden"
  },
  item: {
    width: 30, height: 30, borderRadius: 15, backgroundColor: "#000", margin: 10,
  },
});

the circle should not be out of border-radius. How can I do that?

any help would be appreciated.

Answer 1

The overflow: hidden property goes in the parent, not in the child. So you should put it in the container style instead of in the itemContainer style.

This answer works because of that.

Answer 2

You need to change container style and itemContainer.

    const App = () => {
      return (
        <View style={styles.container} >
          <View style={styles.itemContainer}>
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
            <View style={styles.item} />
          </View>
        </View>
      );
    };
    
    

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemContainer: {
    position: 'absolute',
    top: 200,
    right: 20,
    width: 200,
    height: 200,
    borderColor: 'red',
    borderWidth: 1,
    backgroundColor: '#ff0',
    borderBottomEndRadius: 200,
    flexDirection: 'row',
    flexWrap: 'wrap',
    overflow: 'hidden',
  },
  item: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: '#000',
    margin: 10,
  },
});