Skip to main content

RenderHTMLSharedProps

export
interface RenderHTMLSharedProps {
  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;
}
Defined in packages/render-html/src/shared-types.ts

Props shared across renderers.

warning

Shared props changes will cause all the React tree to invalidate. You should always memoize these.

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} />