Skip to main content

FAQ

How To​

Use renderersProps.a.onPress, see Stack Overflow | How to open the browser when a link is pressed? and ​RenderersProps.a.

I want to use a custom component to render some tags, how to do that?​

You can define custom renderers for that purpose. See ​Custom Rendering.

How to access the raw HTML from a custom renderer?​

Use ​domNodeToHTMLString utility. See Stack Overflow | Extract raw HTML in @native-html/render custom renderers.

How to render iframes?​

That's really a piece of cake. See @native-html/iframe-plugin.

How to set the default font size and family?​

You should use ​baseStyle prop.

How to render inline images?​

See this example from the docs: ​Example: Displaying Inline Images.

Aren't there better renderers for tables?​

Sure! The default renderer is very limited. Check-out @native-html/table-plugin and @native-html/heuristic-table-plugin.

How can I make textual content selectable?​

You can take advantage of ​defaultTextProps prop to set selectable to all ​Text instances.

Selectable text example
import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from '@native-html/render';
const source = {
html: `<span>
This text can be selected.
</span>`
};
const defaultTextProps = {
selectable: true
};
export default function App() {
const { width } = useWindowDimensions();
return (
<RenderHtml
contentWidth={width}
source={source}
defaultTextProps={defaultTextProps}
/>
);
}
Press on the button below to show how this code renders on your device.

However, the end-user won't be able to select across multiple blocks: this is a limitation of React Native.

Troubleshooting​

Warning: You seem to update the X prop of the Y component in short periods of time...​

There is a detailed explaination for this warning here: Stack Overflow | @native-html/render, "You seem to update ...".

Custom font families don't work, what's happening?​

You must register fonts available in your app with ​systemFonts prop. This feature is called font selection and prevents native crashes caused by missing fonts! See ​Font Selection.

Also note that fontWeight and fontStyle typefaces modifiers, which might be set by default for some tags such as ​<h1>, will cause the font to be missed on Android if you haven't registered your font with typefaces, e.g. via XML fonts. See this StackOverflow answer for a step-by-step guide.

Line breaks (<br>) seem to take up too much vertical space​

This is a known bug, but hopefully we have the ​enableExperimentalBRCollapsing prop to fix it. See ​Textual | Caveats | Line Breaks.

Isolated empty textual tags take up vertical space​

This is another known bug, but hopefully we have the ​enableExperimentalGhostLinesPrevention prop to fix it. See ​Textual | Caveats | Empty Tags.

Content after custom tags is not displayed or displayed inside instead of below?​

That would often happen in the HTML markup when your custom tags is self-closing such as in <customtag />. The HTML5 standard strictly prohibits non-void elements to be self-closing, and the required behavior for a parser is to ignore the / character in that case. Abding by this standard, the HTML parser will end up considering <customtag /> as equivlent to <customtag >. Therefore, any content below it will be considered as children of <customtag>. Because it is forgiving, the parser will close this tag when it reaches the end of the stream. To overcome this issue, you have two options:

  1. Replace <customtag /> with <customtag></customtag> in your HTML markup.

  2. Set recognizeSelfClosing option to true in ​htmlParserOptions prop.

Sub and sup tags are not vertically shifted​

This is caused by a known limitation in React Native. The issue is being tracked on Github.

The application crashes on Android with react-native-screens​

Likely a bug between react-native-webview and react-native-screens. See Stack Overflow | When rendering iframes, Android crashes while navigating back to stack screen.

Unable to resolve XXX from node_modules/YYY​

Probably an issue with your package manager. See Stack Overflow | Unable to resolve XXX from module YYY.

Long image cannot show in full screen on Android​

This is a limitation of FaceBook's fresco library and React Native ​Image component. You need to downsize the image.

Some anchors (<a>) are not accessible to screen readers​

Because of a React Native bug, nested Text elements are not accessible, which means that the screen reader will not be able to identify ​<a> tags as links when grouped with other textual elements. Below is an example:

<p>
Unfortunately,
<a href="https://domain.com">this hyperlink is not accessible</a>
</p>

Luke Walczak from Callstack explains how to circumvent this issue in a great post. Unfortunately, this workaround cannot be genericized and we will have to wait for a fix in React Native codebase.