Skip to main content

FAQ

How To#

How to intercept press events on links?#

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 react-native-render-html 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 limitted. 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 'react-native-render-html';
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 | react-native-render-html, "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.