Image nested within TextInput will be invisible

[lxcid]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

There were a few similar issues before this one that got closed by the bot (facebook/react-native#17467 & facebook/react-native#17468) because it's missing information or went stale. The author open a stack overflow question that did not get answer.

Here's my attempt to provide a more complete argument and be as informative as possible to help push this feature request/bug fix forward.

I'm aware that <TextInput /> uses SpannableString in Android and NSAttributedString in iOS underneath, both are capable of inlining image (Android with ImageSpan and iOS with NSTextAttachment). But this is not supported by React Native as of v0.54.2.

To be specific, I'm talking about <Image /> nested within <Text /> nested within <TextInput multiline />.

One of the use case is to support custom emoji as described by @just4fun in facebook/react-native#17468 in the GIF below:

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 9.2.0
  Yarn: 1.3.2
  npm: 5.5.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0-alpha.3
  react-native: 0.54.2 => 0.54.2

Steps to Reproduce

A react native project have been created at lxcid/ReactNativeBug-NestedViewInTextInput. You can pull it down locally and launch the project with react-native run-ios or react-native run-android.

Expected Behavior

At minimum, I would hope for <TextInput> + <Text> + <Image> to work as expected in iOS and Android. For example:

<TextInput multiline>
  <Text style={styles.text}>
    There is a react logo{' '}
    <Image
      source={images.react}
      style={{ width: 30, height: 30, backgroundColor: 'pink' }}
    />{' '}
    in between my text.
  </Text>
</TextInput>
// Copied from https://github.com/lxcid/ReactNativeBug-NestedViewInTextInput/blob/1afdd2383ac70d08edc7c4742321cc46c5af225b/app/screens/TextInputImageScreen.js#L14-L23

But if we are able to support <TextInput> + <Text> + <View> as well, that would be awesome!

Actual Behavior

Text + Image

First of all, <Text /> do support nested images, even though its not well documented. There might be some rendering differences between iOS and Android, but they are generally supported.

Text + View

As for nested views in <Text />, only iOS is supported. This is documented here.

TextInput + Image

Surprisingly, for <Image /> nested within <Text /> nested within <TextInput />, It worked for Android but not so much for iOS, which did not display the image.

TextInput + View

As for nested views in <TextInput />, Android crashes while iOS does not display the image.

Summary

I create a table to summarize and compare what we have observed here:

Components	Android	iOS
<Text> + <Image>	✅	✅
<Text> + <View>	💥	✅
<TextInput> + <Text> + <Image>	✅	❌
<TextInput> +<Text> + <View>	💥	❌

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[juanscilingo]

I'm also interested in this functionality. I have the same use case regarding emojis, I'd like to display emoji images (from Twemoji) inside a <TextInput /> as the user writes. I was able to display them inside a <Text />.

[EgidioCaprino]

We need that too 👍

[EgidioCaprino]

@juanscilingo did you find a solution?

[AlishahSolanki]

@juanscilingo @EgidioCaprino got any solution on that ?

[dexter2019]

any update on this? anyone ?

[wenkangzhou]

So, i'd like to display images inside a <Text />,how can i do?

[elliscwc]

hope this can be prioritized..

[filipepratalima]

Im currently getting an issue with 0.57 on iOS, about not being allowed to nest Views inside Text components. This is similar I see to whats reported on Android... only that Im now getting this on iOS.
This was working well on 0.55 though.

[ollyde]

Is this the reason why stickers don't work in RN? :-|

[grabbou]

Thank you for sending this informative issue. I've labeled it accordingly and our team will look into it in the future. If anyone wants to take a stab at implementing it, please do it!

[wumke]

I'm also interested in this functionality. I have the same use case regarding emojis, I'd like to display emoji images (from Twemoji) inside a <TextInput /> as the user writes. I was able to display them inside a <Text />.

Did you find a solution for cross platform emoji support? (I need it for react native on iOS, Android and web to work, and preferably get a notification if the user uses an unsupported newer emoji)

[ollyde]

@wumke Flutter was my solution. Rn is garbage. 😂

Jokes aside, I had to create my own custom native solution using the clipboard in iOS and copy/paste file mangers in Android was a pretty hard task.

[aksmfosef11]

The same is for react native 0.59.8.

[alnorris]

Really wanting this to be fixed, need Views to be inside the TextInput

[just4fun]

This issue was originally created by me in #17468.

I love React Native, it made my dream come true: Launch my first iOS app in App Store. However, RN has been released for more than 4 years, it's still 0.x version, which means there are lots of defects need to be resolved to enhanced.

For my next iOS app, instead of spending time to come to community for such weird or unsupported issues, I'd like to learn Swift.

[wumke]

@wumke Flutter was my solution. Rn is garbage. 😂

Jokes aside, I had to create my own custom native solution using the clipboard in iOS and copy/paste file mangers in Android was a pretty hard task.

@OllyDixon Do you have some of your code in an open source repo? Does it have the same user experience as whatsapp?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.