Table support for react-native-render-html

A WebView bridge rendering tables in react-native-render-html library.

npm add --save react-native-render-html-table-bridge
yarn add react-native-render-html-table-bridge


  • Render HTML tables with a WebView component you provide
  • Supports <HTML>onLinkPress prop to handle clicks
  • Automatic height


Known Limitations:

  • don't forget you're rendering cells inside a webview, so you won't be able to apply your custom renderers there
  • limited support of Expo <33 version ; full support ≥33 versions (see bellow limitation)
  • autoheight and onLinkPress config options only work with WebViewv5.0.0 community edition

Minimal working example

Full example

You need 3 conditions to get to a working example:

  1. Provide import for WebView component. Instructions will differ depending on your setup;
  2. Inject alterNode and ignoredTags props to HTML component;
  3. makeTableRenderer and inject renderers prop to HTML component.
import React, {PureComponent} from 'react';
import {ScrollView} from 'react-native';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import WebView from 'react-native-webview'; // <-- Instructions might defer depending on your setup

const html = `
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>

const config = {
    WebViewComponent: WebView

const renderers = {
  table: makeTableRenderer(config)

const htmlConfig = {
  ignoredTags: IGNORED_TAGS

export default class Example extends PureComponent<Props> {
  render() {
    return (
        <HTML html={html} {...htmlConfig}/>

makeTableRenderer config

This config object will be passed to the HTMLTable component as props.


Required ComponentType

Your WebView component. If importing this component causes errors, check the dedicated troubleshooting section.

Warning: Features such as autoheight and onLinkPress don't work with the legacy core version or Expo <33 version.

Please use latest community edition instead


Optional boolean

Fit height to HTML content.

default: true

Supported WebView: WebView community edition ≥5.0.0 and Expo SDK ≥33.

Warning: When setting to false, you must either give container absolute positioning with style prop, or give a fixed height with defaultHeight prop.
Otherwise, React Native will assign a 0 height.


Optional number

If autoheight is set to true, the container will span to defaultHeight during content height computation.
Otherwise, container height will be fixed to defaultHeight before and after height computation.


Optional number

Maximum container height.

Warning: Content should theoretically be scrollable on overflow, but there is a pending issue in react-native-community/react-native-webview which prevents WebView nested in a ScrollView to be scrollable.


Optional StyleProp<ViewStyle>

Container style.


Optional TableStyleSpecs

An object describing the table appearance.

default: see definition


Optional string

Override default CSS rules.

Info: When set, tableStyleSpecs is ignored.


Optional object

Any properties you want to pass to the WebViewComponent element.

Info: source, injectedJavascript, javascriptEnabled and onMessage
will be ignored and overridden.


Optional boolean

Use native LayoutAnimation instead of Animated module with autoheight.
This should be preferred performance-wise, but you need to setup UIManager on android.

See official guide

default: false


Optional number

The transition duration in milliseconds when table height is updated when autoheight is used.

default: 120


Errors when importing WebView component

Setting up WebView component largely vary on your react-native or expo version.
Please refer to the official documentation and make sure you have selected your RN / Expo SDK version:


How to extend default or custom styles?

A: Use cssRulesFromSpecs function and override cssRules config.

import { defaultTableStylesSpecs, cssRulesFromSpecs } from 'react-native-render-html-table-bridge';

const cssRules = cssRulesFromSpecs(defaultTableStylesSpecs) + `
a {
  text-transform: uppercase;

const config = {
  // Other config options

How to customize the Table component?

A: Use makeCustomTableRenderer function. See custom example.


How to load custom fonts?

A: Extend styles and add @font-face rules.

import { defaultTableStylesSpecs, cssRulesFromSpecs } from 'react-native-render-html-table-bridge';
import { Platform } from 'react-native';

function getFontAssetURL(fontFileName: string) {
    ios: `url(${fontFileName})`,
    android: `url(file://android_asset/fonts/${fontFileName})`

const openSansUnicodeRanges = 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD';

const openSansRegular = getFontAssetURL('OpenSans-Regular.ttf');

const cssRules = cssRulesFromSpecs({
  fontFamily: '"Open Sans"' // beware to quote font family name!
}) + `
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: ${openSansRegular}, format('ttf');
  unicode-range: ${openSansUnicodeRanges};

const config = {
  // Other config options