Shadow style not displaying

[SilentChris]

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.

[SteffeyDev]

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

[SilentChris]

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:

[braxtonchristensen]

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

[SteffeyDev]

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

[SilentChris]

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

[n-kumari]

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.
`

[SteffeyDev]

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.

[SteffeyDev]

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

[SteffeyDev]

I made this change, will be released with 4.2.0

[SteffeyDev]

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