{"id":17160447,"url":"https://github.com/lxcid/reactnativebug-nestedviewintextinput","last_synced_at":"2026-04-24T20:03:50.402Z","repository":{"id":140670889,"uuid":"126815434","full_name":"lxcid/ReactNativeBug-NestedViewInTextInput","owner":"lxcid","description":null,"archived":false,"fork":false,"pushed_at":"2018-03-26T12:24:30.000Z","size":8288,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-24T04:37:31.413Z","etag":null,"topics":["bug","react-native"],"latest_commit_sha":null,"homepage":"https://github.com/facebook/react-native/issues/18566","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxcid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-26T10:58:16.000Z","updated_at":"2018-11-16T03:30:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"068916c7-b7ba-4d98-853d-7e7868511c46","html_url":"https://github.com/lxcid/ReactNativeBug-NestedViewInTextInput","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lxcid/ReactNativeBug-NestedViewInTextInput","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxcid%2FReactNativeBug-NestedViewInTextInput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxcid%2FReactNativeBug-NestedViewInTextInput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxcid%2FReactNativeBug-NestedViewInTextInput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxcid%2FReactNativeBug-NestedViewInTextInput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxcid","download_url":"https://codeload.github.com/lxcid/ReactNativeBug-NestedViewInTextInput/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxcid%2FReactNativeBug-NestedViewInTextInput/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32238749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bug","react-native"],"created_at":"2024-10-14T22:24:53.007Z","updated_at":"2026-04-24T20:03:50.396Z","avatar_url":"https://github.com/lxcid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ReactNativeBug-NestedViewInTextInput\n\n\u003c!--\n  We use GitHub Issues exclusively for tracking bugs in React Native.\n  Questions? Visit http://facebook.github.io/react-native/help.html\n  If this issue is about documentation or the website, please file it at:\n  https://github.com/facebook/react-native-website/issues/new\n--\u003e\n\n- [x] I have reviewed the [documentation](https://facebook.github.io/react-native)\n- [x] I have searched [existing issues](https://github.com/facebook/react-native/issues)\n- [x] I am using the [latest React Native version](https://github.com/facebook/react-native/releases)\n\n\u003c!-- Describe your issue in detail. --\u003e\n\nThere 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) \u0026 [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.\n\nHere's my attempt to provide a more complete argument and be as informative as possible to help push this feature request/bug fix forward.\n\nI'm aware that `\u003cTextInput /\u003e` 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`.\n\nTo be specific, I'm talking about `\u003cImage /\u003e` nested within `\u003cText /\u003e` nested within `\u003cTextInput multiline /\u003e`.\n\nOne 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:\n\n![Custom Emoji](./screenshots/react-native+17468.gif)\n\n## Environment\n\n\u003c!-- Required. Run `react-native info` in your terminal and paste its contents here. --\u003e\n\n```\nEnvironment:\n  OS: macOS High Sierra 10.13.3\n  Node: 9.2.0\n  Yarn: 1.3.2\n  npm: 5.5.1\n  Watchman: 4.9.0\n  Xcode: Xcode 9.2 Build version 9C40b\n  Android Studio: 3.0 AI-171.4443003\n\nPackages: (wanted =\u003e installed)\n  react: ^16.3.0-alpha.1 =\u003e 16.3.0-alpha.3\n  react-native: 0.54.2 =\u003e 0.54.2\n```\n\n## Steps to Reproduce\n\n\u003c!-- \n  Required. Let us know how to reproduce the issue. Include a code sample, share a project, \n  or share an app that reproduces the issue using [Snack](https://snack.expo.io/).\n--\u003e\n\nA 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`.\n\n## Expected Behavior\n\n\u003c!-- Write what you thought would happen. --\u003e\n\nAt minimum, I would hope for `\u003cTextInput\u003e` + `\u003cText\u003e` + `\u003cImage\u003e` to work as expected in iOS and Android. For example:\n\n```jsx\n\u003cTextInput multiline\u003e\n  \u003cText style={styles.text}\u003e\n    There is a react logo{' '}\n    \u003cImage\n      source={images.react}\n      style={{ width: 30, height: 30, backgroundColor: 'pink' }}\n    /\u003e{' '}\n    in between my text.\n  \u003c/Text\u003e\n\u003c/TextInput\u003e\n// Copied from https://github.com/lxcid/ReactNativeBug-NestedViewInTextInput/blob/1afdd2383ac70d08edc7c4742321cc46c5af225b/app/screens/TextInputImageScreen.js#L14-L23\n```\n\nBut if we are able to support `\u003cTextInput\u003e` + `\u003cText\u003e` + `\u003cView\u003e` as well, that would be awesome!\n\n## Actual Behavior\n\n\u003c!-- Write what happened. Include screenshots if needed. If this is a regression, let us know. --\u003e\n\n### Text + Image\n\nFirst of all, `\u003cText /\u003e` 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.\n\n![Text + Image](./screenshots/text+image.png)\n\n### Text + View\n\nAs for nested views in `\u003cText /\u003e`, only iOS is supported. This is documented [here](https://facebook.github.io/react-native/docs/text.html#nested-views-ios-only).\n\n![Text + View](./screenshots/text+view.png)\n\n### TextInput + Image\n\nSurprisingly, for `\u003cImage /\u003e` nested within `\u003cText /\u003e` nested within `\u003cTextInput /\u003e`, It worked for Android but not so much for iOS, which did not display the image.\n\n![TextInput + Image](./screenshots/textinput+image.png)\n\n### TextInput + View\n\nAs for nested views in `\u003cTextInput /\u003e`, Android crashes while iOS does not display the image.\n\n![TextInput + View](./screenshots/textinput+view.png)\n\n### Summary\n\nI create a table to summarize and compare what we have observed here:\n\n|              Components              | Android | iOS |\n| :----------------------------------: | :-----: | :-: |\n|         `\u003cText\u003e` + `\u003cImage\u003e`         |   ✅    | ✅  |\n|         `\u003cText\u003e` + `\u003cView\u003e`          |   💥    | ✅  |\n| `\u003cTextInput\u003e` + `\u003cText\u003e` + `\u003cImage\u003e` |   ✅    | ❌  |\n|  `\u003cTextInput\u003e` +`\u003cText\u003e` + `\u003cView\u003e`  |   💥    | ❌  |\n\n## References\n\n- [facebook/react-native#18566](https://github.com/facebook/react-native/issues/18566)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxcid%2Freactnativebug-nestedviewintextinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxcid%2Freactnativebug-nestedviewintextinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxcid%2Freactnativebug-nestedviewintextinput/lists"}