question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TextInput] Image nested in TextInput will be invisible

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:8

github_iconTop GitHub Comments

7reactions
lxcidcommented, Mar 25, 2018

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

0reactions
react-native-botcommented, Feb 24, 2018

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 ContributeWhat to Expect from Maintainers

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I put an icon inside a TextInput in React Native?
Basically you can't put an icon inside of a textInput but you can fake it by wrapping it inside a view and setting...
Read more >
TextInput - React Native
TextInput. A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, ...
Read more >
The Textarea element - HTML: HyperText Markup Language
This Boolean attribute lets you specify that a form control should have input focus when the page loads. Only one form-associated element in...
Read more >
Action View Form Helpers - Ruby on Rails Guides
Configuring the Model; Nested Forms; The Controller; Removing Objects ... You'll notice that the HTML contains an input element with type hidden ....
Read more >
I don't know how to nest an input element within a form element
Nest the existing input element inside a form element and assign "https://www.freecatphotoapp.com/submit-cat-photo" to the action attribute ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found