React Native - manipulate View to apply shadow to Image's BorderRadius?

Question

Having some styling issues on React Native with Shadows.

I'd like to get a shadow on just the image, which has curved edges (not a square) with the borderradius I've given it. But if I apply a shadow on the parent View, it can't seem to 'follow the edges' of the Image. I'd like for the shadow to be around the curved edges of the Image, not around the square view.

Here is my code:

  <View style={[styles.closedcontainer]}>
    <Image source={{uri: props.food.url}}
           style={styles.smallimage}
      />
  </View>

And here is my styling:

const styles = StyleSheet.create({
  closedcontainer: {
      height: 100,
      width: 100,
      flexDirection: 'row',
      flexWrap: 'wrap',
      paddingLeft: 50,
      paddingRight: 50,
      paddingBottom: 0,
      paddingTop: 0,
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fff9f9',
    shadowColor: 'black',
    shadowOffset: {width: 2, height: 5},
    shadowOpacity: .30,
    shadowRadius: 5,
    // overflow: 'hidden'
  },
  smallimage: {
      height: 100,
      width: 100,
      borderRadius: 30,
      borderColor: "#f97070",
      borderWidth: 2.75,
      margin: 10,
      backgroundColor: 'white',
      resizeMode: 'contain'
  }

I thought perhaps adding overflow hidden to the parent View's styling (closedcontainer) would do it, but that gets hides the whole shadow altogether.

Any ideas? Thanks!

UPDATE: per suggestion, tried setting the borderRadius directly in the , unfortunately still no luck.

Answer 1

Try setting borderRadius directly as a prop on the image instead using it as a style.

<Image borderRadius={25}/>

Or similar