Skip to content

Weird effect in a <Text> with background color with alpha and padding #22245

@dani-mp

Description

@dani-mp

Environment

React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: x64 Intel(R) Core(TM) i5-4258U CPU @ 2.40GHz
Memory: 39.92 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.7.1 - ~/.nvm/versions/node/v9.7.1/bin/node
Yarn: 1.2.1 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v9.7.1/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 21.1.2, 22.0.1, 23.0.1, 23.0.3, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.2, 28.0.3
API Levels: 17, 18, 19, 22, 23, 25, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.0/10A254a - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0 => 16.6.0
react-native: ^0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1

Description

Rendering a <Text /> styled with a background color with alpha and some padding creates a weird effect easily appreciable.

image

Reproducible Demo

https://snack.expo.io/@danielmartin/dGV4dC

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugComponent: TextNeeds: AttentionIssues where the author has responded to feedback.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