React-native: View within text returns strange image - iOS 13

[djorkaeffalexandre]

React Native version: 0.61.1 | 0.60.5

Steps To Reproduce

1. Any <View> within <Text> generate a weird behavior..

<Text>
  <View style={{width: 200, height: 200}} />
</Text>

1. Same to <Text><Image /></Text> like a:

<Text>
  <Image
    style={{ width: 30, height: 30 }}
    source={{
      uri:
      'https://upload.wikimedia.org/wikipedia/commons/5/58/Ponto_Amarelo.png',
    }}
   />
</Text>

It returns a strange image behind the image after upgrade to iOS 13.

Screenshots

[KarenQiao]

yes ,i also have this problem

[partiellkorrekt]

I searched a little through the react-native code and found that the strange image is the placeholder icon for an attachment in an NSAttributedString. RN seems to add attachments to the string to reserve some space and lay the real view on top of the rendered string.

In RCTTextShadowView.m there is a function "attributedTextWithMeasuredAttachmentsThatFitSize" which creates the attachments by using the following code:

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.bounds = (CGRect){CGPointZero, fittingSize};
[attributedText addAttribute:NSAttachmentAttributeName value:attachment range:range];

To verify that the image really is the placeholder image, I modified the code to add an empty image as the attachment image:

NSTextAttachment *attachment = [NSTextAttachment new];
attachment.bounds = (CGRect){CGPointZero, fittingSize};

// This creates an empty image on the fly (just for testing purposes)
UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), NO, 0);
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Set this empty image as the attachment image
[attachment setImage:img];

[attributedText addAttribute:NSAttachmentAttributeName value:attachment range:range];

Using this code, RN stops rendering the document icons and the output looks as expected.

Warning
This code might create a lot of unnecessary images and I don't know how it will affect memory usage. So don't use it in production.

[partiellkorrekt]

I created a new pull-request where the image is only being created once for all attachments. This might be the way to go.

[kristerkari]

I'm seeing the same thing on 0.60.5 and iOS 13 when there is a png or svg image inside a <Text>.

[kristerkari]

I created a new 0.61.1 project that can be used to reproduce the bug:
https://github.com/kristerkari/react-native-ios-13-view-or-image-inside-text-bug

At least React Native versions 0.59, 0.60, and 0.61 seem to be affected (possibly all RN versions).

The bug can also be reproduced on my iPhone 8 device with iOS 13.1 installed.

iOS 12.1

iOS 13.0

[wumke]

Also seeing this issue after updating my phone to IOS13 with RN0.58 app.

@partiellkorrekt : can you place a link to the pull request here? (I need a solution to implement in a production ready app... this issue is really a last-minute p**n in the *ss for my project!)

[partiellkorrekt]

@wumke Here you go: https://github.com/facebook/react-native/pull/26653 :)

[PeteTheHeat]

This commit fixes this issue :)
https://github.com/facebook/react-native/commit/06599b3e594355a1d5062ede049ff3e333285516