Image nested within TextInput will be invisible

Question

Image nested within TextInput will be invisible

lxcid opened this issue 7 years ago · comments

Stan Chang Khin Boon commented 7 years ago

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 · Answer 1 · Thu Jun 28 2018 02:09:36 GMT+0800 (China Standard Time)

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 · Answer 2 · Sun Jul 15 2018 22:08:14 GMT+0800 (China Standard Time)

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

Egidio Caprino · Answer 3 · Mon Aug 20 2018 15:24:04 GMT+0800 (China Standard Time)

We need that too 👍

Egidio Caprino · Answer 4 · Mon Aug 20 2018 15:24:23 GMT+0800 (China Standard Time)

@juanscilingo did you find a solution?

Ali Shah Solanki · Answer 5 · Wed Aug 29 2018 06:00:08 GMT+0800 (China Standard Time)

@juanscilingo @EgidioCaprino got any solution on that ?

dexter2019 · Answer 6 · Wed Oct 10 2018 05:48:52 GMT+0800 (China Standard Time)

any update on this? anyone ?

Jim Chou · Answer 7 · Wed Oct 10 2018 14:19:52 GMT+0800 (China Standard Time)

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

elliscwc · Answer 8 · Thu Oct 18 2018 16:55:49 GMT+0800 (China Standard Time)

hope this can be prioritized..

Filipe Prata de Lima · Answer 9 · Fri Nov 30 2018 18:48:32 GMT+0800 (China Standard Time)

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.

Dee · Answer 10 · Thu Mar 14 2019 18:12:17 GMT+0800 (China Standard Time)

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

Mike · Answer 11 · Tue Mar 19 2019 20:50:45 GMT+0800 (China Standard Time)

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 · Answer 12 · Thu Jun 06 2019 17:18:30 GMT+0800 (China Standard Time)

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)

Dee · Answer 13 · Thu Jun 06 2019 17:23:40 GMT+0800 (China Standard Time)

@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 · Answer 14 · Fri Jun 07 2019 09:26:46 GMT+0800 (China Standard Time)

The same is for react native 0.59.8.

Alister Norris · Answer 15 · Wed Aug 14 2019 18:22:14 GMT+0800 (China Standard Time)

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

zoro · Answer 16 · Thu Aug 15 2019 15:58:40 GMT+0800 (China Standard Time)

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 · Answer 17 · Fri Sep 06 2019 22:53:34 GMT+0800 (China Standard Time)

@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 · Answer 18 · Thu Dec 05 2019 23:20:56 GMT+0800 (China Standard Time)

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 · Answer 19 · Fri Dec 13 2019 00:29:57 GMT+0800 (China Standard Time)

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.