[TextInput] Image nested in TextInput will be invisible

[just4fun]

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 7.7.4
Yarn: -
npm: 4.1.2
Watchman: 4.1.0
Xcode: 9.2.0
Android Studio: -

Packages: (wanted => installed)
react-native: 0.42.2 => 0.42.2
react: 15.4.2 => 15.4.2

Target Platform: iOS (11)

Steps to Reproduce

(Write your steps here:)

1. Create a <TextInput>
2. Nest a <Image> within <TextInput>

Expected Behavior

(Write what you thought would happen.)

1. The <Image> could be displayed within <TextInput>
2. The <Image> could be removed with pressing delete button.

Actual Behavior

1. <Image> will be invisible but it seems like it occupied same space with the width and height we set to <Image>
2. There is also cursor around the invisible image, but when we press delete button, sometimes the space could not be removed. If we move the cursor around the invisible image back and forth and try to press delete button again, the space will be removed

In addition, I know in iOS we could use NSAttributedString while using SpannableString in Android, but not sure how we could archive inserting custom image into <TextInput> with React Native.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

https://stackoverflow.com/questions/45062363/react-native-image-inside-multiline-textinput

(https://snack.expo.io/ is really slow in China, so I use the same issue on stack overflow here, there is screenshot there.)

[eballeste]

Not sure what you are trying to do with images within a TextInput... never seen this before. What are you trying to achieve? Maybe it's best to figure out how to do layouts with Views and flex rules.

[just4fun]

@eballeste - So you know we could insert emoji into TextInput with iOS emoji keyboard, however, I'm working on a BBS app and the BBS has custom emojis (pictures), so I created a emoji picker component (like iOS emoji keyboard). When I tap the custom emoji, the only thing I can do it to insert the code of custom emoji (1 code is mapping to 1 custom emoji) into TextInput. To give user a better experience, it's definitely better to display the custom emoji we tapped into TextInput directly.

[just4fun]

[just4fun]

Anyone has idea on this ticket? It's common case in social app in my opinion.

[hoyajigi]

I have the same issue😭

[just4fun]

If we are building a social app, this case is very common unless we only use iOS built-in emojis.

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[lxcid]

Would love for this to be supported as well. I would say custom view will be amazing…