Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Shadow style not displaying

See original GitHub issue

Running on React Native 0.55.4

I noticed that the default styles for the popover include a box shadow around the view. Unfortunately, this doesn’t seem to be displaying.

It seems that the issue might be a conflict with Animated.View and the boxShadow styles. If I manually hack it so that the styles get applied to a regular View child below the Animated.View, the shadow displays as expected.

Issue Analytics

State:
Created 5 years ago
Reactions:2
Comments:10 (6 by maintainers)

Top GitHub Comments

13reactions

SteffeyDevcommented, Apr 15, 2019

That’s good to know, I do allow a popoverStyle prop so it sounds like you can send { overflow: 'visible' } to fix this on a per-instance basis if you would like.

7reactions

n-kumaricommented, Apr 15, 2019

The issue is there because of overflow: 'hidden' in the style popoverContent. Removing overflow:hidden solves the issue. See snack https://snack.expo.io/@nishakumari/shadow-animated. I have used the same styles as in this library with minor tweaks for easy viewing.

This, however, is not a solution I would want for the library.

There is an open issue with React Native https://github.com/facebook/react-native/issues/449 but was closed and moved to ProductPains.

Please upvote the issue here https://react-native.canny.io/feature-requests/p/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios. `

Top Results From Across the Web

css - Shadow not showing up - Stack Overflow

The reason you can't see the shadow is because the next div (#one) is directly below it, and the shadow is rendering beneath...

css box shadow not working - CSS-Tricks

I'm trying to add a css drop shadow to the header, but I'm not getting any change in the appearance.

CSS box-shadow property - W3Schools

JavaScript syntax: object.style.boxShadow="10px ... No shadow is displayed, Demo ❯ ... If you do not specify the color, the shadow is not displayed...

box-shadow - CSS: Cascading Style Sheets - MDN Web Docs

If not specified, it will be 0 (the shadow's edge is sharp). The specification does not include an exact algorithm for how the...

Apply shadow or blur effects – Figma Help Center

Figma won't display drop shadows through transparent areas of a layer by default. ... You can also create Styles for shadow and blur...