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.

The component should be transparent outside the border

See original GitHub issue

I have searched existing issues and this is not a duplicate

Version

0.6.2-SNAPSHOT (b0b286e1aeb45fd368b8e2764a6269f1590afa2e)

Issues and Steps to Reproduce

screenshot_1504517985

Apply rounded corner and background color on a component

Expected Behavior

The component should be transparent outside the border

Example code

Row.create(c)
    .child(
        Text.create(c)
            .textSizeSp(20)
            .text("This component has rounded corners + background color"))
    .border(
        Border.create(c)
            .widthDip(YogaEdge.ALL, 10)
            .color(YogaEdge.ALL, NiceColor.GREEN)
            .cornerEffect(40f)
            .build()
    )
    .backgroundColor(NiceColor.BLUE)
    .paddingDip(YogaEdge.ALL, 10)

Issue Analytics

State:
Created 6 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

2reactions

xiphirxcommented, Sep 4, 2017

Thanks for the report, I’ll see what I can do about this. The issue is that the background and border are both handled separately, so one does not know of the other.

1reaction

xiphirxcommented, Sep 7, 2017

So looking more into this, there are some issues with adding in support. The biggest issue is clipping to an arbitrary border outline. While technically possible, it will introduce pretty big performance issues, especially on lower API levels, since clipPath is only hardware accelerated on APIs 18+. Additionally, clipPath isn’t anti aliased with hardware acceleration.

We can definitely add in this support later on in the project’s lifetime if we update the min sdk to 21+