❤
npm
Sign UpSign In

This package has been deprecated

Author message:

This package has been moved to @native-html/table-plugin

react-native-render-html-table-bridge
TypeScript icon, indicating that this package has built-in type declarations

0.6.1 • Public • Published

Table support for react-native-render-html

npm DL/month

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

Features:

  • 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 WebView ≥ v5.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 = `
<table>
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
  </tr>
</table>
`;
 
const config = {
    WebViewComponent: WebView
};
 
const renderers = {
  table: makeTableRenderer(config)
};
 
const htmlConfig = {
  alterNode,
  renderers,
  ignoredTags: IGNORED_TAGS
};
 
export default class Example extends PureComponent<Props> {
  render() {
    return (
      <ScrollView>
        <HTML html={html} {...htmlConfig}/>
      </ScrollView>
    )
  }
}

makeTableRenderer config

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

WebViewComponent

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

autoheight

Optional boolean

Fit height to HTML content. The operation is dynamic, because it requires the DOM to be mounted, and a script be executed to send height through the WebView component.

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.

defaultHeight

Optional number

If autoheight is set to true, defaultHeight will be ignored. Otherwise, container height will be fixed to defaultHeight.

maxHeight

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.

style

Optional StyleProp<ViewStyle>

Container style.

tableStyleSpecs

Optional TableStyleSpecs

An object describing the table appearance.

default: see definition

cssRules

Optional string

Override default CSS rules.

Warning: You should at least set a rule which adds a 0-margin to body and html, otherwise the table will look truncated.

Info: When set, tableStyleSpecs is ignored. If you want to extend default instead of override CSS styles, see FAQ.

webViewProps

Optional object

Any properties you want to pass to the WebViewComponent element.

Info: source and javascriptEnabled will be ignored and overridden.

useLayoutAnimations

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

transitionDuration

Optional number

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

default: 120

androidSourceBaseUrl

Optional: string

See: https://git.io/JeCAG

Troubleshooting

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:

Typescript errors

If you encounter typescript errors, chances are you are not following peerDependencies rules. Make sure you follow these rules:

react-native-render-html Bridge
≤ 4.2.0 ≤ 0.5.3
≥ 4.2.1 ≥ 0.6.0

FAQ

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 = {
  cssRules,
  // 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) {
  return Platform.select({
    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({
  ...defaultTableStylesSpecs,
  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 = {
  cssRules,
  // Other config options
}
 

How to use with Jest?

A: Add a react-native-render-html-table-bridge.js file to your __mocks__ folder (this folder should be at the root of your project) with the following content:

const IGNORED_TAGS = [];
const alterNode = jest.fn();
const makeTableRenderer = jest.fn();
 
export {
    IGNORED_TAGS,
    alterNode,
    makeTableRenderer,
};
 

Readme

Keywords

Package Sidebar

Install

npm i react-native-render-html-table-bridge

Repository

github.com/jsamr/react-native-render-html-table-bridge

Homepage

github.com/jsamr/react-native-render-html-table-bridge#readme

Weekly Downloads

358

Version

0.6.1

License

MIT

Unpacked Size

38.4 kB

Total Files

17

Last publish

Collaborators

  • jsamr
Try on RunKit
Report malware