Skip to main content

RenderHTMLConfig

export
interface RenderHTMLConfig {
  GenericPressable?: ComponentType<GenericPressableProps>;
  WebView?: ComponentType<any>;
  bypassAnonymousTPhrasingNodes?: boolean;
  computeEmbeddedMaxWidth?: (contentWidth: number, tagName: string) => number;
  customListStyleSpecs?: Record<string, ListStyleSpec>;
  debug?: boolean;
  defaultTextProps?: TextProps;
  defaultViewProps?: ViewProps;
  defaultWebViewProps?: any;
  enableExperimentalBRCollapsing?: boolean;
  enableExperimentalGhostLinesPrevention?: boolean;
  enableExperimentalMarginCollapsing?: boolean;
  pressableHightlightColor?: string;
  provideEmbeddedHeaders?: EmbeddedHeadersProvider;
  remoteErrorView?: (source: HTMLSourceUri) => ReactElement<any, string | JSXElementConstructor<any>>;
  remoteLoadingView?: (source: HTMLSourceUri) => ReactElement<any, string | JSXElementConstructor<any>>;
  renderers?: CustomTagRendererRecord;
  renderersProps?: Partial<RenderersProps>;
}
Defined in packages/render-html/src/shared-types.ts

Props for the ​RenderHTMLConfigProvider component.

Fields#

GenericPressable#

optional
GenericPressable?: ComponentType<GenericPressableProps>;

A component used to wrap pressable elements (e.g. when provided onPress). Note that textual elements will not be wrapped; TextProps.onPress will be used instead.

Default: A TouchableNativeFeedback based component on Android, TouchableHighlight based component on other platforms.

WebView#

optional
WebView?: ComponentType<any>;

The WebView component used by plugins (iframe, table)... See @native-html/plugins.

Default: () => null

bypassAnonymousTPhrasingNodes#

optional
bypassAnonymousTPhrasingNodes?: boolean;

When true (default), anonymous ​TPhrasing nodes parents of a lonely ​TText node are not translated as React Native Text elements. Instead, their child is directly rendered, e.g. with no Text wrapper.

Default: true

warning

Unless strictly necessary, this should be left to true because some styles don't apply to nested React Native Text elements (borderRadius, padding...).

Example#

With true:

<TPhrasing>
<TText>Hello</TText>
</TPhrasing>

is translated to

<Text>Hello</Text>

With false:

<TPhrasing>
<TText>Hello</TText>
</TPhrasing>

is translated to

<Text><Text>Hello</Text></Text>

computeEmbeddedMaxWidth#

optional
computeEmbeddedMaxWidth?: (contentWidth: number, tagName: string) => number;

A function which takes contentWidth and tagName as arguments and returns a new width. Can return Infinity to denote unconstrained widths.

Default: (c) => c

Remarks
  • Take advantage of ​useComputeMaxWidthForTag hook inside custom renderers to get the maximum width for this tag.
  • Changes to this prop will cause a react tree update. Always memoize it.

customListStyleSpecs#

optional
customListStyleSpecs?: Record<string, ListStyleSpec>;

Provide support for list style types which are not supported by this library.

Remarks

Check the numerous presets provided by @jsamr/counter-style as they require zero-effort!

Example#

import hebrew from '@jsamr/counter-style/presets/hebrew';
const customListStyleSpecs = {
hebrew: {
type: 'textual',
counterStyleRenderer: hebrew
}
};

debug#

optional
debug?: boolean;

Log to the console a snapshot of the rendered ​TDocument after each transient render tree invalidation.

Default: false

defaultTextProps#

optional
defaultTextProps?: TextProps;

Default props for Text elements in the render tree.

Remarks

"style" will be merged into the tnode own styles.

defaultViewProps#

optional
defaultViewProps?: ViewProps;

Default props for View elements in the render tree.

Remarks

"style" will be merged into the tnode own styles.

defaultWebViewProps#

optional
defaultWebViewProps?: any;

Default props for WebView elements in the render tree used by plugins.

enableExperimentalBRCollapsing#

optional
enableExperimentalBRCollapsing?: boolean;

Follow closely the HTML standard and ignore <br> tags closing an inline formatting context.

Default: false

Remarks

Recommended value is true on non-web platforms. Also note that this is an experimental feature, thus subject to behavioral instability.

Example#

<p>
Hello<br />
</p>

When this flag is set to true, one line is printed instead of two on native platforms, which is the HTML-compliant behavior.

enableExperimentalGhostLinesPrevention#

optional
enableExperimentalGhostLinesPrevention?: boolean;

React Native doesn't handle lines like we would expect on a web browser. For example:

<View>
<Text></Text>
</View>

will span 20 dpi in height. Setting this prop to true will make the renderer take those React Native oddities into account. See also this ticket: https://git.io/JErwX

Default: false

Remarks

This is an experimental feature, thus subject to behavioral instability.

enableExperimentalMarginCollapsing#

optional
enableExperimentalMarginCollapsing?: boolean;

Enable or disable margin collapsing CSS behavior (experimental!). See MDN docs.

Default: false

Remarks

Limitations:

  • Only adjacent siblings collapsing is implemented.
  • If one of the margins height is in percent, no collapsing will occur.
  • Will apply indiscriminately to all display properties (including flex), which is not standard.
  • Might not work well with ​TPhrasing nodes having only one child.

This is an experimental feature, thus subject to behavioral instability.

pressableHightlightColor#

optional
pressableHightlightColor?: string;

Color used for pressable items, either for the ripple effect (Android), or highlight (other platforms).

Default: rgba(38, 132, 240, 0.2)

provideEmbeddedHeaders#

optional
provideEmbeddedHeaders?: EmbeddedHeadersProvider;

Provide headers for specific embedded elements, such as images, iframes...

Example#

function provideEmbeddedHeaders(uri, tagName, params) {
if (tagName === "img" &&
uri.startsWith("https://example.com")) {
return {
Authorization: "Bearer daem6QuaeloopheiD7Oh"
}
}
// ...
<RenderHTML provideEmbeddedHeaders={provideEmbeddedHeaders} />

remoteErrorView#

optional
remoteErrorView?: (source: HTMLSourceUri) => ReactElement<any, string | JSXElementConstructor<any>>;

Replace the default error if a remote website's content could not be fetched.

remoteLoadingView#

optional
remoteLoadingView?: (source: HTMLSourceUri) => ReactElement<any, string | JSXElementConstructor<any>>;

Replace the default loader while fetching a remote website's content.

renderers#

optional
renderers?: CustomTagRendererRecord;

Your custom renderers.

Remarks

TypeScript users: To have intellisense for custom renderers, explicitly set your custom renderer type to one of ​CustomBlockRenderer, ​CustomTextualRenderer or ​CustomMixedRenderer depending on the ​HTMLContentModel defined for this tag (see example below).

Example#

A custom renderer for <div> tags which trigger an alert on press.

import React from 'react';
import RenderHTML, { CustomBlockRenderer } from 'react-native-render-html';
import { Alert } from 'react-native';
const onPress = () => Alert.alert("I pressed a div!");
// (TypeScript) Notice the type for intellisense
const DivRenderer: CustomBlockRenderer = function DivRenderer({ TDefaultRenderer, ...props }) {
return <TDefaultRenderer {...props} onPress={onPress} />;
}
const renderers = { div: DivRenderer }
//
return <RenderHTML renderers={renderers} />

renderersProps#

optional
renderersProps?: Partial<RenderersProps>;

Props to use in custom renderers with useRendererProps.

Remarks
  • When you use the hook, you'll get this object deep-merged with default renderers props.
  • Typescript users: If you need to add fields to the ​RenderersProps interface, you should use module augmentation:
declare module 'react-native-render-html' {
interface RenderersProps {
div?: {
customProp: boolean;
};
}
}