Shadow style not displaying

Question

Shadow style not displaying

SilentChris opened this issue 6 years ago · comments

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.

Peter Steffey · Answer 1 · Wed Aug 22 2018 23:34:23 GMT+0800 (China Standard Time)

Interesting, can you upload screenshots to show the difference, or submit a PR with your fix?

Chris Rivers · Answer 2 · Thu Aug 30 2018 02:19:27 GMT+0800 (China Standard Time)

I noticed that the change I made to make the drop shadow display causes the popover to not display on Android at all. Trying to figure out if there's a way to resolve that.

An example of what I'm talking about though...
This is the display without any changes:

This is the display with my hacky fix to wrap just the content view in a view that contains only the dropShadow style:

Braxton Christensen · Answer 3 · Wed Oct 17 2018 02:10:58 GMT+0800 (China Standard Time)

I also noticed this, I added a package patch to add the shadow but it wouldn't open on android after my attempt, I'll try to look into this some more. If I find a good solution I'll open a PR

Peter Steffey · Answer 4 · Thu Apr 11 2019 11:11:51 GMT+0800 (China Standard Time)

@braxtonchristensen @SilentChris Did you guys ever get this to work consistently? I would be happy to merge in some code and test if you have working code in a fork or locally.

Chris Rivers · Answer 5 · Sat Apr 13 2019 01:26:27 GMT+0800 (China Standard Time)

I don't think I ever came up with a great solution here. Since we don't use popovers in a lot of places, I just have it switching styles based on Platform.OS with iOS getting the drop-shadow styles. I'm still not sure why the existing shadow style doesn't work as expected on the outer View container

Nisha Kumari · Answer 6 · Sat Apr 13 2019 04:47:43 GMT+0800 (China Standard Time)

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 facebook/react-native#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.
`

Peter Steffey · Answer 7 · Tue Apr 16 2019 06:07:30 GMT+0800 (China Standard Time)

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.

Peter Steffey · Answer 8 · Fri Feb 25 2022 04:41:19 GMT+0800 (China Standard Time)

For now, I'll probably make it so that overflow is set to visible if any shadow props are passed in.

Peter Steffey · Answer 9 · Sat Mar 12 2022 11:46:07 GMT+0800 (China Standard Time)

I made this change, will be released with 4.2.0

Peter Steffey · Answer 10 · Mon Mar 28 2022 05:12:55 GMT+0800 (China Standard Time)

Version 5.0.0 released, which includes many shadow-related fixes and improvements (see https://github.com/SteffeyDev/react-native-popover-view#upgrading)