Move RCTParagraphTextView drawing to contentView#46081
Closed
cipolleschi wants to merge 2 commits into
Closed
Conversation
facebook-github-bot
added
CLA Signed
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D61431369 |
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D61431369 |
cipolleschi
force-pushed
the
export-D61431369
branch
from
1fdae76 to
3b9bc3a
Compare
Summary: This diff adds an example in RNTester to verify that we can draw text on top of a colored background and non uniform border radius. As you can see from the test plan, the current code works well when: * There is only the background color * There is a background color and uniform cornerRadius * There are non uniform border radius but the background is transparent. The current code **does not** work when: * there is a background and non-uniform border radius * there is a background, uniform border radius and borderwidth The reason why this happens is because: * `RCTParagraphComponentView` draws the text in the View's main layer in the `drawRect` method * `RCTViewComponentView` has a method `invalidateLayer` that, when there are non-uniform border radii o there is a borderWidth, it creates an extra `CALayer` with an image as content and that layer is put on top of the base layer, covering the text. ## Changelog [Internal] - Add example to RNTester Differential Revision: D61389317
Summary: Pull Request resolved: facebook#46081 This change fixes an issue that has been reported by OSS where a Text with both background color and borderWidth is not rendered properly. The reason is that `RCTParagraphComponentView` uses the `drawRect` method which draws the text in the main view layer, while the parent `RCTViewComponentView` can apply an extraLayer on top of the base layer, drawing on top of the text. This change moves the drawing of the text to an auxiliary view, `RCTParagraphTextView`, that is set as contentView of the `RCTParagraphView`. In this way, the text is drawn in a different view and can't be covered by the `_borderLayer` ## Changelog: [Internal] - Introduce a RCTParagraphTextView to draw the text Reviewed By: joevilches Differential Revision: D61431369
Contributor
|
This pull request was exported from Phabricator. Differential Revision: D61431369 |
cipolleschi
added a commit
to cipolleschi/react-native
that referenced
this pull request
Aug 20, 2024
Summary: Pull Request resolved: facebook#46081 This change fixes an issue that has been reported by OSS where a Text with both background color and borderWidth is not rendered properly. The reason is that `RCTParagraphComponentView` uses the `drawRect` method which draws the text in the main view layer, while the parent `RCTViewComponentView` can apply an extraLayer on top of the base layer, drawing on top of the text. This change moves the drawing of the text to an auxiliary view, `RCTParagraphTextView`, that is set as contentView of the `RCTParagraphView`. In this way, the text is drawn in a different view and can't be covered by the `_borderLayer` ## Changelog: [Internal] - Introduce a RCTParagraphTextView to draw the text Differential Revision: D61431369
cipolleschi
force-pushed
the
export-D61431369
branch
from
3b9bc3a to
a28469d
Compare
Contributor
|
This pull request has been merged in f4609db. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
This change fixes an issue that has been reported by OSS where a Text with both background color and borderWidth is not rendered properly.
The reason is that
RCTParagraphComponentViewuses thedrawRectmethod which draws the text in the main view layer, while the parentRCTViewComponentViewcan apply an extraLayer on top of the base layer, drawing on top of the text.This change moves the drawing of the text to an auxiliary view,
RCTParagraphTextView, that is set as contentView of theRCTParagraphView. In this way, the text is drawn in a different view and can't be covered by the_borderLayerChangelog:
[Internal] - Introduce a RCTParagraphTextView to draw the text
Differential Revision: D61431369