ShadowOffset has wierd behaviour on iOS

[adrianskogvold]

While using the popover I noticed an issue with shadowOffset on iOS,

There are 2 usecases that I've seen so far:

When just using the isVisible prop and animating the popover in then the shadowOffset will be incorrect on the first render, but will be correct on sequential renders. In the app I'm working on I remove it completely from the DOM when its not visible. And when that is the case then the shadowOffset will be incorrect at all times. I've made a expo to show off both usecases: https://snack.expo.dev/@forestviolence/arrogant-cheese

On the app I'm working on I added a small hack to Popover.js that seems to fix the issue:

Screenshots: First render: all following renders:

[SteffeyDev]

Thanks for identifying this issue. Can you please share the full code of your fix? The screenshot is making it difficult to tell what you changed. A before and after would be even better.

[Forestviolence]

Hi @SteffeyDev Line 859 in Popover.js

 var popoverViewStyle = __assign(__assign(__assign(__assign(__assign({ position: 'absolute' }, styles.dropShadow), styles.popoverContent), StyleSheet.flatten(popoverStyle)), { transform: [
                { translateX: animatedValues.translate.x },
                { translateY: animatedValues.translate.y },
                { scale: animatedValues.scale },
                { perspective: 1000 }
            ] }), {shadowOffset: { width: new Animated.Value(popoverStyle.shadowOffset.width), height: new Animated.Value(popoverStyle.shadowOffset.height)}});

Added some formatting to the screenshots to make it more readable Before:

After:

Difference is an added layer of __assign() containing the shadowOffset styles

I've tried to add the fix to Popover.tsx: Line:1026, but typescript seem to think that .shadowOffset does not exist on popoverStyle.

[SteffeyDev]

Thanks for the details. I'm actually unable to get shadowOffset working period now, both in your snack and in my own testing. Are you still able to get it working with your modifications?

[SteffeyDev]

Looks like this was due to an issue in Animated.View. Moving shadow props to parent fixed. https://github.com/oblador/react-native-animatable/issues/133

[SteffeyDev]

Fix will be included in 5.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)