NativeElementModel

reexport

interface NativeElementModel<
  T extends string,
  C
> {
  category: C;
  getMixedUAStyles?: (tnode: TNodeDescriptor, element: Element) => undefined
    | null
    | void
    | MixedStyleDeclaration;
  getReactNativeProps?: (
    tnode: TText
      | TBlock
      | TPhrasing
      | TEmpty
      | TDocument,
    preGeneratedProps: null | ReactNativePropsSwitch,
    element: Element
  ) => undefined
    | null
    | void
    | ReactNativePropsDefinitions;
  getUADerivedStyleFromAttributes?: (attributes: Record<string, string>, markers: Markers) => null | MixedStyleDeclaration;
  isOpaque?: boolean;
  isVoid?: boolean;
  mixedUAStyles?: MixedStyleDeclaration;
  reactNativeProps?: ReactNativePropsDefinitions;
  setMarkersForTNode?: SetMarkersForTNode;
  tagName: T;
}

Defined in @native-html/transient-render-engine

An object to specify tags parts of the HTML4 and HTML5 standards.

Type Parameters

T

The name of the tag to which the model will apply.

C

The ​ElementCategory associated with this tag.

Fields

category

required

category: C;

The category of this element as per HTML5 standard.

getMixedUAStyles

optional

getMixedUAStyles?: (tnode: TNodeDescriptor, element: Element) => undefined
  | null
  | void
  | MixedStyleDeclaration;

A function to create conditional "user-agent" styles.

Remarks

For example, <a> tags will have underline decoration and be colored blue only when href is defined.

getReactNativeProps

optional

getReactNativeProps?: (
  tnode: TText
    | TBlock
    | TPhrasing
    | TEmpty
    | TDocument,
  preGeneratedProps: null | ReactNativePropsSwitch,
  element: Element
) => undefined
  | null
  | void
  | ReactNativePropsDefinitions;

A function to create React Native props from a ​TNode grouped by native components.

Those props will be deep-merged over the pre-generated props. You can preserve some of the pre-generated props since you receive them as second argument.

Merge strategy (latest overrides former):

1. props from reactNativeProps,
2. auto-generated props from attributes
3. props returned by this function

Returns: React Native props grouped by native components (see ​ReactNativePropsDefinitions). Those props will be passed to the underlying native component at render time.

Example

import { defaultHTMLElementModels } from "react-native-render-html";

const customHTMLElementModels = {

a: defaultHTMLElementModels.a.extend({

getReactNativeProps(tnode) {

const attributes = tnode.attributes;

return {

native: {

accessibilityHint:

attributes['data-scope'] === 'internal'

? 'Open in a new screen.'

: 'Open in system web browser.',

},

};

},

}),

};

getUADerivedStyleFromAttributes

optional

getUADerivedStyleFromAttributes?: (attributes: Record<string, string>, markers: Markers) => null | MixedStyleDeclaration;

A function to create conditional "user-agent" styles.

Deprecated

This feature will be removed in the next major release. Use ​getMixedUAStyles instead.

isOpaque

optional

isOpaque?: boolean;

An opaque element translated ​TNode will have no translated ​TNode children.

isVoid

optional

isVoid?: boolean;

true when the associated tag is a void element.

Remarks

• Void elements cannot have children.
• TText-translated void elements will be preserved even though they don't have children.

mixedUAStyles

optional

mixedUAStyles?: MixedStyleDeclaration;

Equivalent of "user-agent" styles. The default styles for the element.

Remarks

These styles will be merged over by tagsStyles.

reactNativeProps

optional

reactNativeProps?: ReactNativePropsDefinitions;

React Native props grouped by native components. Those props will be passed to the underlying native component at render time.

Remarks

Some props might be overriden by props derived from the ​TNode attributes. For example, if you pass accessibilityLabel and there is an aria-label attribute attached to one node, the aria-label will be used. If you want to be able to override the aria-label, use ​getReactNativeProps instead.

Example

import {HTMLElementModel, HTMLContentModel} from 'react-native-render-html';

const customHTMLElementModels = {

'nav-button': HTMLElementModel.fromCustomModel({

tagName: 'nav-button',

contentModel: HTMLContentModel.block,

reactNativeProps: {

native: {

onPress() {

console.info('nav-button pressed');

},

},

},

}),

};

setMarkersForTNode

optional

setMarkersForTNode?: SetMarkersForTNode;

Derive markers for one TNode.

tagName

required

tagName: T;

The tag name associated with this model.