Use Nội dung chínhHow To#
How to intercept press events on links?#
renderersProps.a.onPress
, see Stack Overflow | How to open the browser when a link is pressed? and RenderersProps.a
.
] seem to take up too much vertical space#
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
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:
Replace
with
in your HTML markup.
Set
recognizeSelfClosing
option totrue
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.