View elevation results in shadow growing longer for Android

[SupriyaKalghatgi]

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.4
CPU: x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 28.73 MB / 8.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.11.3 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 26.0.1, 26.0.3
API Levels: 23, 26
IDEs:
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

The shadow grows for each subsequent view. Happens only on Android

Reproducible Demo

<View style={{ padding: 5}}>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
  <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
</View>

Snack URL: https://snack.expo.io/HJLli4eS7

[SupriyaKalghatgi]

@hramos Any fix for this? Its been more than a month

[SupriyaKalghatgi]

#20792

[hramos]

@SupriyaKalghatgi do you have a pull request that fixes this?

[SupriyaKalghatgi]

nope

[krakz999]

It works as intended. Material design elevation uses 2 type of lights, a key light (imagine it as the sun) and ambient light, which results in a combined lighting. The farther the object from the key light, the larger the shadow grows because of the virtual distance from the key light.

https://material.io/design/environment/light-shadows.html#

If you need a custom shadow, I recommend creating an own solution using react-native-svg or 9 patch.

[paour]

@krakz999 if that were the case, a single tall card would have the same shadow as the last in a series of cards. Scrolling would also dynamically change the shadows.

[paour]

And indeed they do!

[mjmasn]

@krakz999 but don't the two animations at the bottom of that page contradict that?

When a surface changes shape or scale, but its elevation remains the same, its shadow should not change

Don't really see it as a problem, just noticed the increasing shadow side as I scrolled some items in a list and was curious as to whether it was intentional or not.

[dagatsoin]

@SupriyaKalghatgi have you any idea of why there are "shadow corners" in each View ? I manage to make dissapear when setting height and width. But it seems very weird.

[stale]

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]

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.