https://github.com/lxcid/reactnativebug-nestedviewintextinput
https://github.com/lxcid/reactnativebug-nestedviewintextinput
bug react-native
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lxcid/reactnativebug-nestedviewintextinput
- Owner: lxcid
- Created: 2018-03-26T10:58:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-26T12:24:30.000Z (over 8 years ago)
- Last Synced: 2026-04-24T04:37:31.413Z (3 months ago)
- Topics: bug, react-native
- Language: JavaScript
- Homepage: https://github.com/facebook/react-native/issues/18566
- Size: 7.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactNativeBug-NestedViewInTextInput
- [x] I have reviewed the [documentation](https://facebook.github.io/react-native)
- [x] I have searched [existing issues](https://github.com/facebook/react-native/issues)
- [x] I am using the [latest React Native version](https://github.com/facebook/react-native/releases)
There were a few similar issues before this one that got closed by the bot ([facebook/react-native#17467](https://github.com/facebook/react-native/issues/17467) & [facebook/react-native#17468](https://github.com/facebook/react-native/issues/17468)) because it's missing information or went stale. The author open a [stack overflow question](https://stackoverflow.com/questions/48033885/how-to-insert-custom-emoji-small-pictures-into-textinput-of-react-native) 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 `` 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 `` nested within `` nested within ``.
One of the use case is to support custom emoji as described by [@just4fun in facebook/react-native#17468](https://github.com/facebook/react-native/issues/17468#issuecomment-356797095) 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](https://github.com/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 `` + `` + `` to work as expected in iOS and Android. For example:
```jsx
There is a react logo{' '}
{' '}
in between my text.
// Copied from https://github.com/lxcid/ReactNativeBug-NestedViewInTextInput/blob/1afdd2383ac70d08edc7c4742321cc46c5af225b/app/screens/TextInputImageScreen.js#L14-L23
```
But if we are able to support `` + `` + `` as well, that would be awesome!
## Actual Behavior
### Text + Image
First of all, `` 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 ``, only iOS is supported. This is documented [here](https://facebook.github.io/react-native/docs/text.html#nested-views-ios-only).
### TextInput + Image
Surprisingly, for `` nested within `` nested within ``, It worked for Android but not so much for iOS, which did not display the image.
### TextInput + View
As for nested views in ``, 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 |
| :----------------------------------: | :-----: | :-: |
| `` + `` | ✅ | ✅ |
| `` + `` | 💥 | ✅ |
| `` + `` + `` | ✅ | ❌ |
| `` +`` + `` | 💥 | ❌ |
## References
- [facebook/react-native#18566](https://github.com/facebook/react-native/issues/18566)