React-native: Android view shadow increase while using same elevation

[slorber]

• [x] I have reviewed the documentation
• [X] I have searched existing issues
• [X] I am using the latest React Native version

Environment

Scanning folders for symlinks in /../client-demo/node_modules (20ms)

Environment:
  OS: macOS High Sierra 10.13.4
  Node: 8.7.0
  Yarn: 1.2.1
  npm: 5.4.2
  Watchman: 4.7.0
  Xcode: Xcode 9.3 Build version 9E145
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz => 0.54.2

Steps to Reproduce

deleted: sorry the original code was copied from https://github.com/facebook/react-native/issues/15832 and the snack was actually an hello world

Expected Behavior

All shadows should be the same

Actual Behavior

The shadow is increasing in a weird way:

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[slorber]

This issue is there for a long time. It has already been reported but always closed by stale bot while it was still reproducible. I'm reopening it as it's clearly still there and won't disappear magically.

See original closed issue:

• https://github.com/facebook/react-native/issues/15832
• https://github.com/facebook/react-native/issues/10411

[slorber]

not sure exactly why but sometimes I get a correct behavior when I remove the view borders and only use elevation+background. And some other times the same setup lead to elevation not working everywhere (actually it seems to work at first and then the elevation disappear, except in the bottom)

[slorber]

Hmmmm actually it seems to always work fine with a background, but due to android not supporting overflow, the shadow can be clipped. Adding a parent with some padding can help (here I'm applying shadows to FlatList items)

Also this solution of @sibelius can be a nice alternative: https://medium.com/entria/solving-view-overflow-in-android-reactnative-f961752a75cd

[SupriyaKalghatgi]

20501

[kientux]

Isn't it how elevation works on android? Imagine the light source is from the top, then shadow will be longer when the view is far from light source. Just test it on native android project to see the effect.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.