Drop shadow is hexagonal on circular IconButton

[lawrence-laz]

Not sure if this is issue with the library or my code, but I am experiencing an incorrectly shaped drop-shadow while using IconButton. That looks like this: This is the code for it:

<View style={{ position: 'absolute', top: 20, zIndex: 70, }}>
    <IconButton
        icon='arrow-left-circle'
        onPress={navigation.goBack}
        color={Colors.white}
        size={30}
        style={{
            shadowColor: 'rgba(1, 0, 0, 1)',
            shadowOpacity: 0.8,
            elevation: 6,
            shadowRadius: 25,
            shadowOffset: { width: 1, height: 13 }
        }}
    />
</View>

Any ideas?

Reproduced in a Snack

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[lukewalczak]

Hey @lawrence-laz could you please provide more details about the platform and device on which you are facing that issue? I've just run your snack on physical device and component along with the shadow is rendered correctly.

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide more information about the issue? Please fill the issue template when opening the issue without deleting any section. We need all the information we can, to be able to help. Make sure to at least provide - Current behaviour, Expected behaviour, A way to reproduce the issue with minimal code (link to snack.expo.dev) or a repo on GitHub, and the information about your environment (such as the platform of the device, versions of all the packages etc.).

[lawrence-laz]

I've experienced this locally on an emulated Android Pixel 3A device as well as remotely in the provided Snack when using a virtual Android device hosted by Expo (had to wait in a queue and unsure what concrete device was running there though). Here's a screenshot from a Snack:

[lukewalczak]

Maybe it's some kind of rendering limitations on emulated device. Did you try it on the real device?

[lawrence-laz]

Just ran the same Snack on a physical Android Samsung S8:

It seems like it could be an Android issue? Have you tested this on an iPhone?

[lukewalczak]

Yes, I've tested it on iPhone. I'm just wondering if that issue is specifically related to the library 🤔 Could you please try to apply your shadow to the different component, not related to the Paper, to ensure the problem exists in IconButton?

[lawrence-laz]

I modified the Snack to include IconButton with shadow (top left), simple React Native View with same shadow (top right), IconButton without a shadow (bottom left) and simple View without a shadow (bottom right).

Simple View seems to be rendering shadow nicely.

[matt-koevort]

FYI also seeing this on a physical device (Samsung Galaxy S9) when using elevation on a simple View. Unrelated to this libray imo.

[lawrence-laz]

FYI also seeing this on a physical device (Samsung Galaxy S9) when using elevation on a simple View. Unrelated to this libray imo.

Are you seeing it using the same Snack as above?

[lukewalczak]

Since the root cause most likely exists outside of the Paper library, I'm closing the issue. However, if you come across any new findings or thoughts, please feel free to share them here with everyone.