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

JSX Source
HTML Snippet
TRT Snapshot

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:

Replace <customtag /> with <customtag></customtag> in your HTML markup.
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.