Skip to content

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

@oskarpyk

Description

@oskarpyk

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_10

elevation: 50
elevation_50

Reproducible Demo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions