Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image nested within TextInput will be invisible #18566

Closed
3 tasks done
lxcid opened this issue Mar 26, 2018 · 19 comments
Closed
3 tasks done

Image nested within TextInput will be invisible #18566

lxcid opened this issue Mar 26, 2018 · 19 comments
Labels
Bug Component: TextInput Related to the TextInput component. Impact: Platform Disparity Platform: Android Android applications. Platform: iOS iOS applications. Priority: Low Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@lxcid
Copy link

lxcid commented Mar 26, 2018

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:

Custom Emoji

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 + Image

Text + View

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

Text + View

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 + Image

TextInput + View

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

TextInput + View

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> 💥
@react-native-bot react-native-bot added Component: TextInput Related to the TextInput component. Platform: macOS Building on macOS. labels Mar 26, 2018
@hramos hramos removed the Platform: macOS Building on macOS. label Mar 29, 2018
@stale
Copy link

stale bot commented Jun 27, 2018

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 27, 2018
@juanscilingo
Copy link

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

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 15, 2018
@EgidioCaprino
Copy link

We need that too 👍

@EgidioCaprino
Copy link

@juanscilingo did you find a solution?

@AlishahSolanki
Copy link

@juanscilingo @EgidioCaprino got any solution on that ?

@dexter2019
Copy link

any update on this? anyone ?

@wenkangzhou
Copy link

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

@elliscwc
Copy link

hope this can be prioritized..

@filipepratalima
Copy link

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
Copy link

ollyde commented Mar 14, 2019

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

@grabbou
Copy link
Contributor

grabbou commented Mar 19, 2019

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
Copy link

wumke commented Jun 6, 2019

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
Copy link

ollyde commented Jun 6, 2019

@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
Copy link

The same is for react native 0.59.8.

@alnorris
Copy link

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

@just4fun
Copy link

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
Copy link

wumke commented Sep 6, 2019

@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
Copy link

stale bot commented Dec 5, 2019

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 stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 5, 2019
@stale
Copy link

stale bot commented Dec 12, 2019

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.

@stale stale bot closed this as completed Dec 12, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Dec 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Impact: Platform Disparity Platform: Android Android applications. Platform: iOS iOS applications. Priority: Low Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests