[Bug] [Android] Elevated style property does not behave correctly on TouchableOpacity

[oskarpyke]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes, I have,

Environment

1. react-native -v: 0.48.2
2. node -v: 8.1.4
3. npm -v: 5.0.3
4. yarn --version: 1.0.1

Then, specify:

• Target Platform:

Android 7.1.1

• Development Operating System: Windows 7 Service Pack 1 (Yes, ancient)

• Build tools: Standard Android Studio Emulator with VS Code running the packager.

Steps to Reproduce

1. Create an instance of TouchableOpacity in your root View
2. Add an elevation: 10, style prop

Expected Behavior

On other components, a level 10 shadow would create a fairly noticeable shadow.

Actual Behavior

When a level 10 elevation is applied to a TouchableOpacity, the shadow is so faint it's almost indiscernible from the background. If you try to increase the elevation, the behaviour is even stranger. Once the elevation exceeds 30, the barely distinguishable shadow we had before disappears completely. In a word, I'd say the shadows are about 10x less pronounced than on other components. For no apparent reason.

elevation: 10

elevation: 50

Reproducible Demo

One the move currently; will post an Expo Snack when I get home.

[vonovak]

if I remember correctly, the elevation needs to be set as a prop on the view itself, not the styles

[oskarpyke]

Just checked, an elevation value passed as a prop has no effect. The elevation style property works perfectly on all other components.

[jnrepo]

Noticing this as well, elevation style works fine with TouchableWithoutFeedback but doesn't show when I use it TouchableOpacity...

[jnrepo]

@Annorstades

my issue was #10411

Had to add a backgroundColor style to the TouchableOpacity and that seems to fix it for me

[Elf2707]

It seems to me Android clips shadow because it can't draw outside of a component boundaries. Try to make two views TouchableOpacity inside View, apply elevation to TouchableOpacity and add padding for wrapper View. Maybe I'm wrong.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.