Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

View backgroundColor is removed if the content is to long with borderRadius

See original GitHub issue

Description

It seems if a View with backgroundColor + borderRadius contains a large amount of text, it will stop rendering the backgroundColor of the View

Reproduction Steps and Sample Code

https://snack.expo.io/SJ6UPQmal

As you can see the top box renders correctly with a small amount of items, but the bottom box with 400 items doesn’t display a background color screenshot_20170406-120053

Removing the border radius then displays the background again screenshot_20170406-120151

Solution

Ideally it would be nice to be able to use backgroundColor with borderRadius for large content

Additional Information

React Native version: 0.42 + 0.43.1 (tried it on the latest)
Platform: Android 5, 6, 7, we can’t replicate this on IOS
Development Operating System: Windows + Mac OS
Dev tools: WebStorm

Issue Analytics

State:
Created 6 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

ngraefcommented, Oct 12, 2017

This is still an issue. Tested in 0.50.0-rc.0.

0reactions

ngraefcommented, May 3, 2018

Tested in 0.55.3. Still an issue.

Top Results From Across the Web

Background color overflowing out of border radius - React native

its comming form CardView component, but when i add border width to 1 instead of 0.25 than background is not overflowing.

border-radius - CSS-Tricks

Sometimes you can see a background-color “leak” outside of a border when border-radius is present (here's a perfect example).

Incorrect background-color bleeds on cell corners using ...

Set ROW background-color, then target one CELL in ROW and give it a new background-color plus a border-radius:>0. Actual results: The exposed corners...

Design Museum Shop

Remove padding so people aren't caught out if they zero out fieldsets. ... footer .link-list a { display: inline-block; background-color: rgba(232, 227, 22, ......

CSS Rounded Corners - W3Schools

The CSS border-radius property defines the radius of an element's corners. Tip: This property allows you to add rounded corners to elements!