[TextInput] Image nested in TextInput will be invisible

Question

[TextInput] Image nested in TextInput will be invisible

just4fun opened this issue 7 years ago · comments

zoro commented 7 years ago

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:)

Create a <TextInput>
Nest a <Image> within <TextInput>

Expected Behavior

(Write what you thought would happen.)

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

Actual Behavior

<Image> will be invisible but it seems like it occupied same space with the width and height we set to <Image>
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.)

Enrique Ballesté Peralta · Answer 1 · Thu Jan 11 2018 00:47:19 GMT+0800 (China Standard Time)

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.

zoro · Answer 2 · Thu Jan 11 2018 09:01:05 GMT+0800 (China Standard Time)

@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.

zoro · Answer 3 · Thu Jan 11 2018 09:42:21 GMT+0800 (China Standard Time)

zoro commented 7 years ago

zoro · Answer 4 · Sat Jan 20 2018 14:36:43 GMT+0800 (China Standard Time)

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

Hyunseok Cho · Answer 5 · Mon Jan 22 2018 13:17:55 GMT+0800 (China Standard Time)

I have the same issue😭

zoro · Answer 6 · Fri Feb 23 2018 00:26:29 GMT+0800 (China Standard Time)

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

React Native Bot · Answer 7 · Sat Feb 24 2018 11:21:23 GMT+0800 (China Standard Time)

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}

Stan Chang Khin Boon · Answer 8 · Sun Mar 25 2018 20:26:27 GMT+0800 (China Standard Time)

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