Fix bug in iOS13 nested text rendering

Summary:
This fixes a bug reported by Oculus and OSS.

https://github.com/facebook/react-native/issues/26577

When rendering images nested in a `<Text/>` node, on the native side, `RCTTextShadowView` adds an empty NSTextAttachment to the attributed string to add some extra space. The image is then overlaid in the empty space  . This all works fine and dandy on iOS12 and below.

Starting in iOS13, an empty NSTextAttachment doesn't render as blank space. It renders as the "missing image" white page. When the real image is overlaid on the white page, it looks super broken. See github issue and test plan for examples.

This fix is to assign an empty image to `NSTextAttachment`. I tried seeing if there was any other attribute we could use to just add white space to an attributed string, but this seems like the best one.

Changelog: [iOS][Fixed] Fixed bug rendering nested text on iOS13

Reviewed By: xyin96

Differential Revision: D18048277

fbshipit-source-id: 711cee96934fc1937d694621a4417c152dde3a31
This commit is contained in:
Peter Argany
2019-10-21 16:29:11 -07:00
committed by grabbou
parent 5051bf21a7
commit 32c90eb8da
+7
View File
@@ -177,6 +177,12 @@
- (NSAttributedString *)attributedTextWithMeasuredAttachmentsThatFitSize:(CGSize)size
{
static UIImage *placeholderImage;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
placeholderImage = [UIImage new];
});
NSMutableAttributedString *attributedText =
[[NSMutableAttributedString alloc] initWithAttributedString:[self attributedTextWithBaseTextAttributes:nil]];
@@ -195,6 +201,7 @@
maximumSize:size];
NSTextAttachment *attachment = [NSTextAttachment new];
attachment.bounds = (CGRect){CGPointZero, fittingSize};
attachment.image = placeholderImage;
[attributedText addAttribute:NSAttachmentAttributeName value:attachment range:range];
}
];