rounded Views with borders shows small gap

Summary:
When a __rounded__ View on Android has a border, a small gap appears between the border and the center of the view (most noticeably when the background and border colors are the same)

Since the border is drawn on top of the other layers, the approach here is to make the center of the View slightly larger so that there is an overlap with the border, and closing the visible gap

There are 2 cases for a View with a border:
1. `borderWidth` is set for a consistent border width around all 4 edges
2. Uneven border widths are set (using `borderTopWidth`, `borderLeftWidth, ...)

**How is a rounded rectangle drawn?**
__Case 1__: `borderWidth` is set for a consistent border width around all 4 edges
- Before:
  - first, `mInnerClipPathForBorderRadius` was used to draw the center of the View
  - then the border is drawn along the path of `mCenterDraw` with a stroke width of the border width
- Now:
  - `mBackgroundColorRenderPath` is used to draw the center of the View and is exactly a slightly enlarged version of `mInnerClipPathForBorderRadius`

__Case 2__: Uneven border widths are set (using borderTopWidth, borderLeftWidth, ...)
- Before:
  - `mInnerClipPathForBorderRadius` was used to draw the center of the View
  - for each edge, a quadrilateral is drawn
  - `mOuterClipPathForBorderRadius` clips the outer edge of the border
  - `mInnerClipPathForBorderRadius` (same is used to draw the center of the View) clips the inner edge of the border
- Now:
  - `mBackgroundColorRenderPath` is used to draw the center of the View, allowing `mInnerClipPathForBorderRadius` to persist as the path that clips the inner edge of the border

When `mGapBetweenPaths` = 0, `mBackgroundColorRenderPath` == `mInnerClipPathForBorderRadius`, which is exactly the original implementation

Changelog:
[Internal][Fixed] - rounded Views with borders shows small gap

Reviewed By: mdvacca

Differential Revision: D39979567

fbshipit-source-id: 6db71d14ead6256e1b7becf73862e0a537c6a47b
This commit is contained in:
Sharon Zheng authored and Facebook GitHub Bot committed 2022-11-10 19:09:51 -08:00
1 parent 6743d15329
commit 29caed22cc
2 files changed
+65 -19

No files matched your search

@@ -126,4 +126,10 @@ public class ReactFeatureFlags {
// TODO (T136375139): Remove this once finish testing
public static boolean enableAtomicRegisterSegment = false;
/**
* Allow closing the small gap that appears between paths when drawing a rounded View with a
* border.
*/
public static boolean enableCloseVisibleGapBetweenPaths = true;
}