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
    }
  }
});

0

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 8
  • Comments: 27 (12 by maintainers)

Commits related to this issue

Most upvoted comments

+1 Still happening today no shadows when using overflow: hidden

Any 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?

— Reply to this email directly or view it on GitHub https://github.com/facebook/react-native/issues/449#issuecomment-112192402 .

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.

Am 15.06.2015 um 22:53 schrieb Spencer Ahrens notifications@github.com:

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?

— Reply to this email directly or view it on GitHub https://github.com/facebook/react-native/issues/449#issuecomment-112192402 .

— Reply to this email directly or view it on GitHub.

@vjeux As I expected, the shadow is visible.

https://jsfiddle.net/L55drqzg/1/