Encountering styling challenges in React Native with shadows.
I am aiming to apply a shadow only on the image, which has rounded edges rather than being square due to the border-radius applied. However, when I try to add a shadow to the parent View element, it does not adhere to the curved edges of the Image. My goal is for the shadow to outline the curved edges of the Image, not the square view.
https://i.sstatic.net/LXd1H.png
Here is the code snippet:
<View style={[styles.closedcontainer]}>
<Image source={{uri: props.food.url}}
style={styles.smallimage}
/>
</View>
And here are the styles applied:
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 attempted to incorporate "overflow: hidden" into the parent View's style (closedcontainer) but it caused the entire shadow to disappear altogether.
https://i.sstatic.net/yvWfE.png
Any thoughts or suggestions? Thank you!
UPDATE: Following the suggestion, I tried setting the borderRadius directly in the <Image> tag, unfortunately without success.
https://i.sstatic.net/O1EZH.png