React-native: [Shadow] Shadow does not appear if overflow: hidden is set

[oisinlavery]

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

[vjeux]

cc @sahrens If I remember correctly, it's not rendering shadows for phones that are not good enough and by default the simulator fits that.

[NovaDev94]

Maybe it's about 64-bit architecture, if that then it's related to: #448

Some images for this, the shadows is rendered fine on 4s, 5 but not 5s and 6:

[oisinlavery]

Shadow is NOT visible on iPhone 6

Shadow is visible on:

• iPhone 5 Simulator
• iPad Retina Simulator
• iPad 2 Simulator

Shadow is NOT visible on

• iPhone 5s Simulator
• iPhone 6 Simulator
• iPhone 6+ Simulator
• iPad Air Simulator

[sahrens]

Our GPU fill-rate gating was only for some specific product code, and was no longer necessary after we switched to assets for shadows instead of the layer properties. There shouldn't be anything in the infra intentionally disabling shadows, probably just some sort of bug - cc @a2, @nicklockwood

That said, I would recommend using assets instead of the shadow properties in general - they tend to perform much better on older devices.

On Mar 29, 2015, at 12:27 PM, Oisin Lavery [email protected] wrote:

Shadow is NOT visible on iPhone 6

Shadow is visible on:

iPhone 5 Simulator
iPad Retina Simulator
iPad 2 Simulator
Shadow is NOT visible on

iPhone 5s Simulator
iPhone 6 Simulator
iPhone 6+ Simulator
iPad Air Simulator
—
Reply to this email directly or view it on GitHub.

[NovaDev94]

The problem is the shadow properties only work on old devices, not the new
ones.

On Monday, March 30, 2015, Spencer Ahrens [email protected] wrote:

Our GPU fill-rate gating was only for some specific product code, and was
no longer necessary after we switched to assets for shadows instead of the
layer properties. There shouldn't be anything in the infra intentionally
disabling shadows, probably just some sort of bug - cc @a2, @nicklockwood

That said, I would recommend using assets instead of the shadow properties
in general - they tend to perform much better on older devices.

On Mar 29, 2015, at 12:27 PM, Oisin Lavery <[email protected]

Shadow is NOT visible on iPhone 6

Shadow is visible on:

iPhone 5 Simulator
iPad Retina Simulator
iPad 2 Simulator
Shadow is NOT visible on

iPhone 5s Simulator
iPhone 6 Simulator
iPhone 6+ Simulator
iPad Air Simulator
—
Reply to this email directly or view it on GitHub.

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

Regards,
Truong Ngoc Dai

[brentvatne]

:+1: I noticed this today and would be happy to attempt to fix the bug if someone could point me in the right direction.

[wangii]

as far as I get, setShadowOpacity not working inside of RCTSetProperty on iPhone simulator running iPhone 5s, iPhone 6, and iPhone 6 plus, probably due to the fact that the type of shadowOpacity is float instead of CGFloat, according to CALayer doc

[mbrgm]

What's the current state of this?

[jsierles]

I see the shadow now on the iPhone 5s simulator: https://rnplay.org/plays/6_nkSA

Also see the shadow on the iPhone 6 device.

@oisinlavery Still seeing this issue?

[brentvatne]

I see the shadow on my iPhone 5s. Let's reopen this if anyone has the issue again.

[mbrgm]

I found that the shadow disappears once I set overflow: 'hidden' in the view's style. Is this intended behavior?

[sahrens]

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 [email protected]
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
.

[mbrgm]

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 [email protected]:

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 [email protected]
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]

@mbrgm: our base reference to all of those questions is the web. Can you add a shadow and overflow hidden on a div in a jsfiddle and see what happens?

[mbrgm]

@vjeux As I expected, the shadow is visible.

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

[vjeux]

cc @nicklockwood

[sahrens]

Yeah, we should try to follow web where possible, but this might be kinda tricky - what do you think, @nicklockwood?

[nicklockwood]

@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).

[aleclarson]

What's the status on this?

[nicklockwood]

I'm looking into addressing this, but it will take a while. FWIW, It's not a bug; this is how shadows are supposed to work on iOS, and there are fairly simple workarounds (nesting two views). But we would ideally like React to conform to the CSS spec here, so I'm working to make that happen.

[nicklockwood]

Sorry, I see I already said all that earlier ¯_(ツ)_/¯

[eyaleizenberg]

Any updates on this? Thanks...

[nicklockwood]

No progress, I'm afraid. I'd still advocate the nested views approach for now.

[brentvatne]

Hey folks, I'm moving this one over to ProductPains as per our new policy! Give it an upvote there if you believe this is an important fix: https://productpains.com/post/react-native/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios/

In the meantime, feel free to use the approach that maestro @nicklockwood suggested above. I'm going to close the issue as there isn't much benefit to having it open here and on ProductPains.

[Amurmurmur]

Any updates on that? Still experiencing it on iOS 10.3.3, iPhone 7, RN 0.47.1 overflow: 'hidden' no shadows :/

[deb0ch]

Still happening today 😕

[nanndoj]

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