Hướng dẫn react-native-render-html renderers

How To#

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

Nội dung chính

  • How to intercept press events on links?#
  • I want to use a custom component to render some tags, how to do that?#
  • How to access the raw HTML from a custom renderer?#
  • How to render iframes?#
  • How to set the default font size and family?#
  • How to render inline images?#
  • Aren't there better renderers for tables?#
  • How can I make textual content selectable?#
  • Troubleshooting#
  • Warning: You seem to update the X prop of the Y component in short periods of time...#
  • Custom font families don't work, what's happening?#
  • Line breaks (
    ) seem to take up too much vertical space#
  • Isolated empty textual tags take up vertical space#
  • Content after custom tags is not displayed or displayed inside instead of below?#
  • Sub and sup tags are not vertically shifted#
  • The application crashes on Android with react-native-screens#
  • Unable to resolve XXX from node_modules/YYY#
  • Long image cannot show in full screen on Android#
  • Some anchors () are not accessible to screen readers#

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

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 ​

, 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 (
) 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 . 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 as equivlent to . Therefore, any content below it will be considered as children of . 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 with 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 () 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 ​ tags as links when grouped with other textual elements. Below is an example:

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.