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.

Sign up for GitHub

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

Jump to bottom

Support inline images #428

Closed
kl1703222 opened this issue Nov 9, 2020 · 3 comments
Closed

Support inline images #428

kl1703222 opened this issue Nov 9, 2020 · 3 comments
Labels
enhancement An enhancement is a change that is not a feature. is:missing template This issue does not comply with our contribution guidelines.

Comments

@kl1703222
Copy link

I want to display the icon in the middle of the text, for example below:
a
but in my mobile device using it displays the wrong size and not in the same line:
Screen Shot 2020-11-09 at 18 20 48
my code:

<HTML
           html={`<p>An inline SVG image is embedded to present the Italy flag
<img src="https://fomoyolo-dev-assets.s3.amazonaws.com/image-gallery/c4ea7600-9acb-11ea-a7d0-9bf50f73b3c4.jpg" style="height:px; width:10px" />
in a paragraph of text...
</p>`}/>

How can I display images between lines of text?
@jsamr
Copy link
Collaborator

jsamr commented Nov 11, 2020

@kl1703222 Currently, inline images are not supported. Any embedded or block will be hoisted to a new View and break the text flow. This was originally because RN didn't support nesting Views inside Text nodes. It is now possible, but with some limitations and prone to bugs. We might add a way in a forthcoming release to whitelist tags which can be embedded in Text nodes.

Known issues regarding inline contents so far:

My feeling is that, theoretically RN now supports nested Views and other blocks inside Text, but there are probably still a lot of undiscovered issues.

@jsamr jsamr changed the title how to displays an image between lines of text Support inline images Nov 11, 2020
@jsamr jsamr added enhancement An enhancement is a change that is not a feature. is:missing template This issue does not comply with our contribution guidelines. labels Nov 11, 2020
@jsamr jsamr mentioned this issue Nov 26, 2020
Closed
@jsamr
Copy link
Collaborator

jsamr commented Nov 26, 2020 •
edited
Loading

This feature is available in the Foundry release! Try it out now. Check #430 for instructions. There is a specific example available in the Foundry Playground app, "Model tampering". Below is an extract from the "Foundry Playground" snippet:

import {
  defaultElementModels,
  HTMLContentModel,
} from "react-native-render-html";

const customHTMLElementModels = {
  img: defaultElementModels.img.extend({
    contentModel: HTMLContentModel.mixed,
  })
};

//
<RenderHTML customHTMLElementModels={customHTMLElementModels} />

EDIT: The API has been simplified in v6.0.0-alpha-6, and the function renamed to extendDefaultRenderer. I have edited the snippet accordingly.

@jsamr jsamr mentioned this issue Nov 26, 2020
Merged
41 tasks
@jsamr
Copy link
Collaborator

jsamr commented Jun 8, 2021

Closing now since the stable beta which fixes this issue has just been released.

@jsamr jsamr closed this as completed Jun 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement An enhancement is a change that is not a feature. is:missing template This issue does not comply with our contribution guidelines.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jsamr @kl1703222