react-native: [Shadow] Shadow does not appear if overflow: hidden is set
iPhone 6, iOS 8.1.1
var TestKit = React.createClass({
render: function() {
return (
<View style={styles.main}>
<Box/>
</View>
);
}
});
var Box = React.createClass({
render: function() {
return (
<View style={styles.box}></View>
);
}
});
var styles = StyleSheet.create({
main: {
flex: 1,
backgroundColor: "#f1f1f1",
justifyContent: "center",
alignItems: "center"
},
box: {
height: 100,
width: 100,
backgroundColor: "#ffffff",
borderRadius: 10,
shadowColor: "#000000",
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 0
}
}
});
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 8
- Comments: 27 (12 by maintainers)
+1 Still happening today no shadows when using
overflow: hiddenAny updates on that? Still experiencing it on iOS 10.3.3, iPhone 7, RN 0.47.1
overflow: 'hidden'no shadows 😕Still happening today 😕
@sahrens I agree, we should try to emulate CSS, as we do for all other aspects of border rendering.
There’s a fix I need to make to clipping that will fix this as a side effect anyway.
The best solution in the meantime is to nest two views, with the shadow on the outer view and clipping on the inner view (this is basically what my fix will be, but it’ll be done opaquely by the framework instead of explicitly).
Yeah, we should try to follow web where possible, but this might be kinda tricky - what do you think, @nicklockwood?
The shadow typically displays outside the bounds of the view, so if you set overflow hidden I would expect it to clip the shadow. If you really need overflow hidden, you could put the shadow properties on a wrapper view that doesn’t hide the overflow? On Mon, Jun 15, 2015 at 1:10 PM Marius Bergmann notifications@github.com wrote:
I found that the shadow disappears once I set
overflow: 'hidden'in the view’s style. Is this intended behavior?I expected it to clip the overflowing content of the view (like when you have rounded corners), but not the shadow. Apparently this is a very subjective expectation and having a container view for the shadow properties works just as well.
@vjeux As I expected, the shadow is visible.
https://jsfiddle.net/L55drqzg/1/