[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 notifications@github.com 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 notifications@github.com 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 <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> 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.

—
Reply to this email directly or view it on GitHub
#449 (comment)
.

Regards,
Truong Ngoc Dai

[brentvatne]

👍 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 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
#449 (comment)
.

[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 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
#449 (comment)
.

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