React Native Render HTML

https://meliorence.github.io/react-native-render-html/
Admin
React Native Render HTML is a library that allows developers to render HTML content into 100% native...
Tokens:140,035
Snippets:1,602
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Expo CLI

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I

Install the Expo CLI globally if you don't have it. This is required to create and manage Expo projects.

```bash
npm install -g expo-cli
```

--------------------------------

### Install Project Dependencies

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I

Install the necessary dependencies for the React Native blog application. This includes navigation, rendering, and UI libraries.

```bash
cd rnrh-blog
expo install @react-navigation/native@^5 @react-navigation/stack@^5 \
react-native-screens react-native-safe-area-context \
react-native-rss-parser@^1 react-native-render-html \
react-native-paper@^4 react-native-gesture-handler events
```

--------------------------------

### Custom List Style Specs Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlconfig

Provides an example of how to integrate custom list style types using presets from '@jsamr/counter-style'.

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

--------------------------------

### Install react-native-render-html

Source: https://meliorence.github.io/react-native-render-html/docs/intro

Use npm to install the Foundry release (v6) of react-native-render-html into your project.

```bash
npm install --save-prod react-native-render-html
```

--------------------------------

### Simple Usage Example

Source: https://meliorence.github.io/react-native-render-html/docs/intro

A minimal working example demonstrating how to render HTML content using the `source` prop. The `contentWidth` prop is important for proper image scaling.

```javascript
import React from 'react';
import RenderHtml from 'react-native-render-html';

const App = () => {
  const source = {
    html: `
      <h1>Hello world</h1>
      <p>This is a paragraph.</p>
    `
  };

  return (
    <RenderHtml
      source={source}
      contentWidth={380} // Example value
    />
  );
};

export default App;
```

--------------------------------

### Courier New Font Example

Source: https://meliorence.github.io/react-native-render-html/docs/content/textual

Example demonstrating font selection for Courier New. Ensure Courier New is available in the system or registered via `systemFonts`.

```javascript
systemFonts: ['"Courier New"']
```

--------------------------------

### getMixedUAStyles Example

Source: https://meliorence.github.io/react-native-render-html/api/elementmodelbase

Example of how to use `getMixedUAStyles` to conditionally apply styles based on element attributes.

```APIDOC
## Field: getMixedUAStyles

### Description
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.

### Example
```typescript
getMixedUAStyles: (tnode, element) => {
  if (element.attributes.href) {
    return { textDecoration: 'underline', color: 'blue' };
  }
  return null;
}
```
```

--------------------------------

### Space Mono Font Example

Source: https://meliorence.github.io/react-native-render-html/docs/content/textual

Example demonstrating font selection for Space Mono. Ensure Space Mono is available in the system or registered via `systemFonts`.

```javascript
systemFonts: ['"Space Mono"']
```

--------------------------------

### customListStyleSpecs Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlsharedprops

Provides support for custom list style types not natively supported. This example demonstrates how to import and configure Hebrew list styles using @jsamr/counter-style.

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

Copy
```

--------------------------------

### reactNativeProps Example

Source: https://meliorence.github.io/react-native-render-html/api/elementmodelbase

Example showing how to define default React Native props for a custom HTML element using `reactNativeProps`.

```APIDOC
## Field: reactNativeProps

### Description
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
```javascript
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');
        },
      },
    },
  }),
};
```
```

--------------------------------

### Arial Font Example

Source: https://meliorence.github.io/react-native-render-html/docs/content/textual

Example demonstrating font selection for Arial. Ensure Arial is available in the system or registered via `systemFonts`.

```javascript
systemFonts: ['Arial']
```

--------------------------------

### v5 Custom Renderer Example

Source: https://meliorence.github.io/react-native-render-html/docs/migration-guide

Example of a custom renderer function in v5. This structure is being replaced by React components in v6.

```jsx
const renderers = {
hr: (htmlAttribs, children, convertedCSSStyles, passProps) => {
return /* Whatever */;
}
};
```

--------------------------------

### enableExperimentalBRCollapsing Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlsharedprops

When true, this flag follows the HTML standard by ignoring `<br>` tags that close an inline formatting context. This example shows a `<br />` tag within a paragraph. Setting this to true on non-web platforms is recommended.

```html
<p>
Hello<br />
</p>

Copy

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

--------------------------------

### getReactNativeProps Example

Source: https://meliorence.github.io/react-native-render-html/api/elementmodelbase

Example demonstrating how to use `getReactNativeProps` to customize React Native props for a specific HTML element.

```APIDOC
## Field: getReactNativeProps

### Description
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.

**Merge strategy** (latest overrides former):
  1. props from `reactNativeProps`,
  2. auto-generated props from attributes
  3. props returned by this function

### Example
```javascript
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.',
        },
      };
    },
  }),
};
```
```

--------------------------------

### Custom Div Renderer Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Demonstrates how to create a custom renderer for `<div>` tags that triggers an alert on press. This is useful for adding custom interactivity to specific HTML elements.

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

--------------------------------

### Custom Image Renderer with Loading/Error States

Source: https://meliorence.github.io/react-native-render-html/docs/content/images

Build a custom image renderer that displays an activity indicator during loading or success states by utilizing `useIMGElementState`. This example demonstrates handling different image states, though typically `IMGElementContentSuccess` would render the actual image.

```javascript
import { IMGElementContainer, useIMGElementState } from 'react-native-render-html';

const CustomImageRenderer = (props) => {
  const {
    node,
    ...otherProps
  } = props;
  const {
    state,
    width,
    height,
    ...rest
  } = useIMGElementState(node);

  if (state === 'loading' || state === 'error') {
    return (
      <IMGElementContainer {...otherProps} width={width} height={height}>
        <ActivityIndicator />
      </IMGElementContainer>
    );
  }

  // In a real scenario, you would render IMGElementContentSuccess or a custom success view
  return (
    <IMGElementContainer {...otherProps} width={width} height={height}>
      <Text>Image Loaded (or error handled)</Text>
    </IMGElementContainer>
  );
};

<RenderHTML
  source={{ html: "<img src=\"...\" />" }}
  renderers={{ img: CustomImageRenderer }}
/>
```

--------------------------------

### v6 Custom Renderer Component Example

Source: https://meliorence.github.io/react-native-render-html/docs/migration-guide

Example of a custom renderer as a React component in v6. It receives props like tnode, onPress, and style.

```jsx
const renderers = {
hr: ({
 tnode,
 onPress,
 propsFromParent,
 sharedProps,
 style,
 textProps,
 type,
 viewProps,
 InternalRenderer,
 TDefaultRenderer
}) => {
return /* Whatever */;
}
};
```

--------------------------------

### Whitespace Collapsing Example

Source: https://meliorence.github.io/react-native-render-html/docs/flow/transient-render-engine

Demonstrates the translation, hoisting, and collapsing transformation from HTML to TRT, showing how whitespace is handled according to CSS rules.

```javascript
HTML:
<p>  Hello   </p>

TRT:
<TBlock>
  <TText>Hello</TText>
</TBlock>
```

--------------------------------

### baseTarget Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

Specifies how anchor tags should be actioned on press. By default, it opens the system browser, equivalent to `_blank`. Custom implementations can override this behavior.

```typescript
baseTarget: "_blank" |
  "_self" |
  "_parent" |
  "_top";
```

--------------------------------

### Select DOM Root to Render

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Use the `selectDomRoot` prop to specify a subtree to render. This example renders only the first `<h1>` tag found in the HTML.

```javascript
import { findAll } from 'domutils';
import { TNode } from 'react-native-render-html';

function selectH1Root(root: TNode) {
  return findAll(node => node.name === 'h1', root, true)[0];
}

```

--------------------------------

### Prerendering DOM with Asynchronous Operations

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Inspect the DOM before rendering and perform asynchronous operations. This example finds all `<img>` tags and simulates preloading.

```javascript
import React, { useState, useEffect, useMemo } from 'react';
import {
  TRenderEngineProvider,
  RenderHTMLConfigProvider,
  RenderHTMLSource,
  useAmbientTRenderEngine
} from 'react-native-render-html';
import { findAll } from 'domutils';

function isImgElement(node) {
  return node.name === 'img';
}

function RenderSource({ html }) {
  const [isDomReady, setIsDomReady] = useState(false);
  const engine = useAmbientTRenderEngine();
  const dom = useMemo(() => engine.parseDocument(html), [html, engine]);

  useEffect(function inspectDom(){
    const images = findAll(isImgElement, dom, true);
    // Simulate preloading
    setIsDomReady(true);
  },[dom]);

  return isDomReady ?
    <RenderHTMLSource source={{ dom }} />
    : null;
}

const html = `
hello world!
<img src='https://img.io/001.jpg' />
`

export default function App() {
  return (
    <TRenderEngineProvider>
      <RenderHTMLConfigProvider>
        <RenderSource html={html} />
      </RenderHTMLConfigProvider>
    </TRenderEngineProvider>
  );
}

```

--------------------------------

### Custom Renderer Example with onPress

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/07/foundry-announcement

Demonstrates how to create a custom H1 renderer that intercepts press events. This custom renderer reuses the default renderer for its children and props.

```javascript
import React from 'react';
import { Alert } from 'react-native';

function H1Renderer({
  TDefaultRenderer,
  ...props
}) {
  const onPress = () => Alert.alert('pressed!');
  return (
    <TDefaultRenderer
      {...props}
      onPress={onPress}
    />
  );
}
```

--------------------------------

### useIMGElementState

Source: https://meliorence.github.io/react-native-render-html/api/useimgelementstate

Computes concrete dimensions from image natural dimensions and constraints. It will fetch the image and get its dimensions.

```APIDOC
## useIMGElementState

### Description
This hook will compute concrete dimensions from image natural dimensions and constraints. It will fetch the image and get its dimensions.

### Remarks
If you know the dimensions beforehand, use `useIMGElementStateWithCache` instead to save a network request and prevent a layout shift.

### Parameters
#### `props`
- **props** (UseIMGElementStateProps) - Required - Props for the useIMGElementState hook.
```

--------------------------------

### Custom HTML Element Model Example

Source: https://meliorence.github.io/react-native-render-html/api/customelementmodel

Example of extending default HTML element models to customize React Native props for anchor tags.

```typescript
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.',
        },
      };
    },
  }),
};
```

--------------------------------

### meta Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

An array containing attributes from `<meta>` elements.

```typescript
meta: Array<{ 
  name: string;
  value: string;
}>;
```

--------------------------------

### Custom Image Renderer using useInternalRenderer

Source: https://meliorence.github.io/react-native-render-html/docs/content/images

Create a custom image renderer by leveraging the `useInternalRenderer` hook. This example shows how to access internal props to display an interactive thumbnail that reveals the full-resolution image on press.

```javascript
const CustomImageRenderer = (
  props: TNodeRenderingStore<TDefaultRenderer>
) => {
  const { TDefaultRenderer, ...otherProps } = props;

  const { node, ... } = otherProps;
  const { src } = node.attributes;

  const onPress = () => {
    // Navigate to full resolution image
  };

  return (
    <TouchableOpacity onPress={onPress}>
      <Image source={{ uri: getThumbnailUri(src) }} style={styles.thumbnail} />
    </TouchableOpacity>
  );
};

<RenderHTML
  source={{ html: "<img src=\"...\" />" }}
  renderers={{ img: CustomImageRenderer }}
/>
```

--------------------------------

### Provide Embedded Headers

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Provide headers for specific embedded elements like images or iframes. Example shows how to add an Authorization header for images from a specific domain.

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

--------------------------------

### Custom List Style Specification

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Example of how to provide custom list style types not supported by the library, using presets from '@jsamr/counter-style'.

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

--------------------------------

### useContentWidth

Source: https://meliorence.github.io/react-native-render-html/api/usecontentwidth

A hook to get access to the ambient `contentWidth`. It returns the contentWidth available in context.

```APIDOC
## useContentWidth()

### Description
A hook to get access to the ambient `contentWidth`.

### Returns
The contentWidth available in context.

### Signature
`function useContentWidth(): number`
```

--------------------------------

### Experimental BR Collapsing Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Shows the effect of the `enableExperimentalBRCollapsing` prop on `<br />` tags. When true, it collapses the line break according to HTML standards, reducing the rendered lines on native platforms.

```html
<p>
Hello<br />
</p>
```

--------------------------------

### Hoisting Constraint Example

Source: https://meliorence.github.io/react-native-render-html/docs/flow/transient-render-engine

Illustrates the translation and hoisting transformation from HTML to TRT, enforcing the constraint that TPHRASING nodes should only have TTEXT, TPHRASING, and TEMPTY children.

```javascript
HTML:
<p><span>Hello</span></p>

TRT:
<TBlock>
  <TPhrasing>
    <TText>Hello</TText>
  </TPhrasing>
</TBlock>
```

--------------------------------

### enableUserAgentStyles

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Enable or disable fallback styles for each tag. For example, `pre` tags will have `whiteSpace` set to 'pre' by default.

```APIDOC
## enableUserAgentStyles

### Description
Enable or disable fallback styles for each tag. For example, `pre` tags will have `whiteSpace` set to 'pre' by default.

### Type
`boolean`

### Default
`true`
```

--------------------------------

### Customizing getReactNativeProps for 'a' tag

Source: https://meliorence.github.io/react-native-render-html/api/nativeelementmodel

Example of extending the default 'a' tag model to conditionally set accessibility hints based on a 'data-scope' attribute.

```typescript
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.',
        },
      };
    },
  }),
};
```

--------------------------------

### RenderHTML with Custom Div Renderer

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlconfig

Renders HTML content using a custom renderer for `<div>` tags. This example shows how to apply the `renderers` prop with a custom `DivRenderer`.

```javascript
<RenderHTML renderers={renderers} />
```

--------------------------------

### Define Custom HTML Element Model for Blue Circle

Source: https://meliorence.github.io/react-native-render-html/blog/2021/10/23/6-2-updates

Use `HTMLElementModel.fromCustomModel` to define a new HTML tag like `<blue-circle>` and specify its styles and content model. This example demonstrates how to create a custom element with fixed dimensions and background color.

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

// The eponym prop to pass to RenderHTML
const customHTMLElementModels = {
  'blue-circle': HTMLElementModel.fromCustomModel({
    tagName: 'blue-circle',
    mixedUAStyles: {
      width: 50,
      height: 50,
      borderRadius: 25,
      alignSelf: 'center',
      backgroundColor: 'blue'
    },
    contentModel: HTMLContentModel.block
  })
};

```

--------------------------------

### Create React Native Project with Expo

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I

Initialize a new React Native project using Expo CLI. This command sets up a project with TypeScript and Yarn, named 'Blog'.

```bash
expo init rnrh-blog -t expo-template-blank-typescript --name Blog --yarn
```

--------------------------------

### Setting up Composite Rendering Architecture

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/28/create-blog-app-rnrh-II

Configure TRenderEngineProvider and RenderHTMLConfigProvider at the root of the application to manage rendering configurations and ignore specific HTML tags.

```typescript
import * as React from 'react';
import {
 RenderHTMLConfigProvider,
 TRenderEngineProvider,
 TRenderEngineConfig,
} from 'react-native-render-html';
import { findOne } from 'domutils';
const selectDomRoot: TRenderEngineConfig["selectDomRoot"] = (
node
) =>
findOne((e) => e.name === "article", node.children, true);
const ignoredDomTags = ["button"];
export default function WebEngine({ children }: React.PropsWithChildren<{}>) {
// Every prop is defined outside of the function component.
// This is important to prevent extraneous rebuilts of the engine.
return (
<TRenderEngineProvider
ignoredDomTags={ignoredDomTags}
selectDomRoot={selectDomRoot}>
<RenderHTMLConfigProvider enableExperimentalMarginCollapsing>
{children}
</RenderHTMLConfigProvider>
</TRenderEngineProvider>
);
}
```

--------------------------------

### IMGElementStateSuccess Interface

Source: https://meliorence.github.io/react-native-render-html/api/imgelementstatesuccess

The IMGElementStateSuccess interface defines the structure for a successfully loaded image element. It includes properties for alt text, container styles, image dimensions, image styles, an error handler, the image source, and a type indicator.

```APIDOC
## IMGElementStateSuccess

### Description
State when the image has been successfully loaded.

### Interface Definition
```typescript
interface IMGElementStateSuccess {
  alt?: string;
  altColor?: string;
  containerStyle: ViewStyle;
  dimensions: ImageDimensions;
  imageStyle: ImageStyle;
  onError: (error: Error) => void;
  source: ImageURISource;
  type: "success";
}
```

### Fields

#### `alt`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt text extract from `alt` attribute.

#### `altColor`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt color, defaults to `color` for this TNode.

#### `containerStyle`
- **Type**: `ViewStyle`
- **Required**: Yes
- **Description**: Styles of the container.

#### `dimensions`
- **Type**: `ImageDimensions`
- **Required**: Yes
- **Description**: Physical dimensions of the image.

#### `imageStyle`
- **Type**: `ImageStyle`
- **Required**: Yes
- **Description**: Image-only style extracted from `IMGElement.style` prop.

#### `onError`
- **Type**: `(error: Error) => void`
- **Required**: Yes
- **Description**: This callback should be passed down to the underlying image component.
- **Remarks**: Quite often, the image won't be pre-fetched because its print dimensions can be determined immediately. For example, when both width and height are provide as attributes. So the first state s0 of this state machine can be "success", and the second state s1 be "error".

#### `source`
- **Type**: `ImageURISource`
- **Required**: Yes
- **Description**: The source to paint.

#### `type`
- **Type**: `"success"`
- **Required**: Yes
- **Description**: Indicates the state is a successful image load.
```

--------------------------------

### Implicit vs Explicit Composite Rendering

Source: https://meliorence.github.io/react-native-render-html/docs/flow/rendering

Demonstrates the equivalent implicit and explicit composite rendering architectures. The explicit form allows for factoring the cost of engine instantiation.

```javascript
import { RenderHTML } from 'react-native-render-html';

<RenderHTML source={{ html }} />
```

```javascript
import {
  TRenderEngineProvider,
  RenderHTMLConfigProvider,
  RenderHTMLSource
} from 'react-native-render-html';

<TRenderEngineProvider>
  <RenderHTMLConfigProvider>
    <RenderHTMLSource source={{ html }} />
  </RenderHTMLConfigProvider>
</TRenderEngineProvider>
```

--------------------------------

### Text Node Start Index Field

Source: https://meliorence.github.io/react-native-render-html/api/text

The 'startIndex' field represents the starting position of the text node in the parsed document. It requires the 'withStartIndices' option to be enabled on the handler.

```typescript
startIndex: null | number;
```

--------------------------------

### Importing Explicit Composite Components

Source: https://meliorence.github.io/react-native-render-html/docs/flow/rendering

Shows how to import the individual components for explicit composite rendering. This is useful for optimizing performance by placing providers higher in the component tree.

```javascript
import {
  TRenderEngineProvider,
  RenderHTMLConfigProvider,
  RenderHTMLSource
} from 'react-native-render-html';
```

--------------------------------

### bypassAnonymousTPhrasingNodes Example (true)

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlsharedprops

When true, anonymous TPhrasing nodes parent of a lonely TText node are not translated as React Native Text elements. This example shows the output when bypassAnonymousTPhrasingNodes is true.

```plaintext
<TPhrasing>
<TText>Hello</TText>
</TPhrasing>

Copy

is translated to

<Text>Hello</Text>

Copy
```

--------------------------------

### bypassAnonymousTPhrasingNodes Example (false)

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlsharedprops

When false, anonymous TPhrasing nodes parent of a lonely TText node are translated as nested React Native Text elements. This example shows the output when bypassAnonymousTPhrasingNodes is false.

```plaintext
<TPhrasing>
<TText>Hello</TText>
</TPhrasing>

Copy

is translated to

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

Copy
```

--------------------------------

### Integrating WebEngine into App Root

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/28/create-blog-app-rnrh-II

Import and wrap the main application components with the WebEngine provider to apply global rendering configurations.

```typescript
// ... other imports
import WebEngine from './components/WebEngine';
const Stack = createStackNavigator<RootStackParamList>();
export default function App() {
return (
<WebEngine>
<SafeAreaProvider>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen
name="Home"
options={{ title: 'Blog' }}
component={HomeScreen}
/>
<Stack.Screen
name="Article"
options={{ headerShown: true }}
component={ArticleScreen}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
</WebEngine>
);
}
```

--------------------------------

### title Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

The content of the `<title>` element.

```typescript
title: string;
```

--------------------------------

### links Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

An array containing attributes from `<link>` elements.

```typescript
links: Array<Record<string, string>>;
```

--------------------------------

### useDocumentMetadata

Source: https://meliorence.github.io/react-native-render-html/api/usedocumentmetadata

Get access to the parsed HTML metadata anywhere in the render tree.

```APIDOC
## useDocumentMetadata()

### Description
Get access to the parsed HTML metadata anywhere in the render tree.

### Function Signature
`useDocumentMetadata(): DocumentMetadata`

### Returns
- `DocumentMetadata`: An object containing the parsed HTML metadata.
```

--------------------------------

### HTMLSourceUri Method Field

Source: https://meliorence.github.io/react-native-render-html/api/htmlsourceuri

The HTTP Method to use. Defaults to GET if not specified.

```typescript
method?: string;
```

--------------------------------

### lang Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

The language of the document, extracted from the `lang` attribute of the `<html>` element.

```typescript
lang: string;
```

--------------------------------

### buildTREFromConfig

Source: https://meliorence.github.io/react-native-render-html/api/buildtrefromconfig

Builds a TRenderEngine instance from a configuration object.

```APIDOC
## Function: buildTREFromConfig

### Description
Build a TRenderEngine instance from a configuration object.

##### Remarks
This utility can be useful to test and debug the TRE layer of your application.

### Parameters
#### `props`
- **props** (TRenderEngineConfig) - Required - The configuration from which a TRE should be built.
```

--------------------------------

### dir Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

Represents the writing direction of the document, extracted from the `dir` attribute of the `<html>` element.

```typescript
dir: "ltr" | "rtl";
```

--------------------------------

### TEmpty Interface Methods

Source: https://meliorence.github.io/react-native-render-html/api/tempty

This section outlines the methods available on the TEmpty interface, including functions to retrieve native and web styles, check for class names, match content models, and generate snapshots.

```APIDOC
## TEmpty Interface Methods

### `getNativeStyles`
required
```getNativeStyles``: ``(``)` `=>` `NativeBlockStyles``;

Get own native styles.
### `getWebStyles`
required
```getWebStyles``: ``(``)` `=>` `Partial``<``WebTextFlowProperties``>`
`  ``& ``CSSProperties`
`  ``& ``Partial``<``Pick``<``ViewStyle``, ``"position"``>``>``;

Get styles that cannot be handled by React Native.
### `hasClass`
required
```hasClass``: ``(``className``: ``string``)` `=>` `boolean``;

Check if this `TNode` has the given `className`.
#### Parameters#

`className`
    
The class to check.
### `matchContentModel`
required
```matchContentModel``: ``(``contentModel``: ``HTMLContentModel``)` `=>` `boolean``;

Test if the given content model matches this TNode content model.
#### Parameters#

`contentModel`
    
The content model to test against.
### `snapshot`
required
```snapshot``: ``(``options``?``: ``Partial``<``TNodePrintOptions``>``)` `=>` `string``;

Create a JSX string representation of this node and its children.
```

--------------------------------

### Enable Percent Width Support for Images

Source: https://meliorence.github.io/react-native-render-html/docs/content/images

Activate `enableExperimentalPercentWidth` to allow images to scale based on percentage widths. Provide `contentWidth` from `useWindowDimensions` for optimal scaling.

```javascript
const htmlContent = `
<img
  src="https://example.com/image.jpg"
  style="width: 50%; height: 100px;"
/>
`;

<RenderHTML
  source={{ html: htmlContent }}
  contentWidth={300} // example value
  enableExperimentalPercentWidth
/>
```

--------------------------------

### Render HTML Snippet with Composite Architecture

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/07/foundry-announcement

Demonstrates the simplified usage of rendering HTML snippets by leveraging the composite rendering architecture. This is equivalent to explicitly using the three-layer rendering engine.

```javascript
<RenderHTML source={{ html }} />
```

```javascript
<TRenderEngineProvider>
<RenderHTMLConfigProvider>
<RenderHTMLSource source={{ html }} />
</RenderHTMLConfigProvider>
</TRenderEngineProvider>
```

--------------------------------

### useRendererProps Hook Usage

Source: https://meliorence.github.io/react-native-render-html/api/userendererprops

Example of how to use the useRendererProps hook. It requires the tagName parameter to retrieve the correct props.

```typescript
```tagName``: ``K``;
```

--------------------------------

### Ignore DOM Nodes Conditionally

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Use `ignoreDomNode` to conditionally exclude DOM nodes during parsing. This example ignores all `<span>` tags.

```javascript
function ignoreSpanNodes(node: TNode, parent: TNode | null): boolean {
  return node.name === 'span';
}

```

--------------------------------

### useAmbientTRenderEngine

Source: https://meliorence.github.io/react-native-render-html/api/useambienttrenderengine

Use the ambient transient render engine. This hook returns the ambient transient render engine.

```APIDOC
## useAmbientTRenderEngine()

### Description
Use the ambient transient render engine.

### Returns
The ambient transient render engine.
```

--------------------------------

### Alter Text Data

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Modify text content using the `onText` callback within `domVisitors`. This example appends ' - modified' to any text node.

```javascript
import { TText } from 'react-native-render-html';

function alterTextData(node: TText) {
  node.data += ' - modified';
}

```

--------------------------------

### enableExperimentalBRCollapsing

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Follow closely the HTML standard and ignore `<br>` tags closing an inline formatting context. Recommended value is `true` on non-web platforms. Also note that this is an experimental feature, thus subject to behavioral instability.

```APIDOC
## enableExperimentalBRCollapsing

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

### Parameters
#### Request Body
- **enableExperimentalBRCollapsing** (boolean) - Optional - Whether to enable experimental BR collapsing.

### 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
```html
<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.
```

--------------------------------

### IMGElementStateBase Interface

Source: https://meliorence.github.io/react-native-render-html/api/imgelementstatebase

The IMGElementStateBase interface defines the common properties for image elements within the render-html library.

```APIDOC
## Interface: IMGElementStateBase

### Description
Base fields for all `IMGElementState`.

### Fields

#### `alt`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt text extracted from the `alt` attribute.

#### `altColor`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt color, defaults to `color` for this `TNode`.

#### `containerStyle`
- **Type**: `ViewStyle`
- **Optional**: No
- **Description**: Styles of the container.

#### `dimensions`
- **Type**: `ImageDimensions`
- **Optional**: No
- **Description**: Physical dimensions of the image.

#### `source`
- **Type**: `ImageURISource`
- **Optional**: No
- **Description**: The source to paint.
```

--------------------------------

### IMGElementStateLoading Interface

Source: https://meliorence.github.io/react-native-render-html/api/imgelementstateloading

The IMGElementStateLoading interface defines the structure for an image element's loading state. It includes properties for alt text, container styles, image dimensions, and the image source.

```APIDOC
## Interface: IMGElementStateLoading

### Description
State when the image is loading.

### Fields

*   **alt** (string, optional) - Alt text extracted from the `alt` attribute.
*   **altColor** (string, optional) - Alt color, defaults to `color` for this `TNode`.
*   **containerStyle** (ViewStyle, required) - Styles of the container.
*   **dimensions** (ImageDimensions, required) - Physical dimensions of the image.
*   **source** (ImageURISource, required) - The source to paint.
*   **type** (string, required) - Must be set to "loading".
```

--------------------------------

### TPhrasing to Text Translation Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

Demonstrates how TPhrasing with a TText child is translated to a simple Text component. When the `true` flag is used, it simplifies the output.

```jsx
<TPhrasing>
  <TText>Hello</TText>
</TPhrasing>
```

--------------------------------

### IMGElementStateSuccess Interface Definition

Source: https://meliorence.github.io/react-native-render-html/api/imgelementstatesuccess

Defines the structure for a successful image load state. Includes optional alt text and color, required container and image styles, dimensions, source, and an onError callback.

```typescript
export
interface IMGElementStateSuccess {
  alt?: string;
  altColor?: string;
  containerStyle: ViewStyle;
  dimensions: ImageDimensions;
  imageStyle: ImageStyle;
  onError: (error: Error) => void;
  source: ImageURISource;
  type: "success";
}
```

--------------------------------

### Bypass Anonymous TPhrasing Nodes Example

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlconfig

Demonstrates the effect of `bypassAnonymousTPhrasingNodes` on rendering nested Text elements. When true, it avoids extra Text wrappers.

```plaintext
With`true` :
<TPhrasing>
<TText>Hello</TText>
</TPhrasing>
Copy
is translated to
<Text>Hello</Text>
Copy
**With`false` :
<TPhrasing>
<TText>Hello</TText>
</TPhrasing>
Copy
is translated to
<Text><Text>Hello</Text></Text>
Copy
```

--------------------------------

### Experimental RTL Mode for Ordered Lists with Arabic Counter Style

Source: https://meliorence.github.io/react-native-render-html/docs/content/lists

Demonstrates experimental RTL support for ordered lists, using an Arabic counter style. Requires a 'dir' attribute or 'direction' style on the list or a parent.

```javascript
import RenderHTML from 'react-native-render-html';
import { Arabic } from '@jsamr/counter-style';

const source = {
  html: '<ol dir="rtl" style="list-style-type: arabic-indic;"><li>Item 1</li><li>Item 2</li></ol>'
};

<RenderHTML
  source={source}
  customListStyleSpecs={{
    'arabic-indic': Arabic
  }}
  renderersProps={{
    ol: {
      // enable experimental RTL mode
      rtl: true
    }
  }}
/>;
```

--------------------------------

### Get HTML Elements Models

Source: https://meliorence.github.io/react-native-render-html/api/trenderengine

Retrieves a record of HTML element models, mapping element names to their content models. This is a required method of the TRenderEngine.

```typescript
getHTMLElementsModels: () => HTMLModelRecord<string, HTMLContentModel>;
```

--------------------------------

### Run the App on Android

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I

Launch the React Native application on an Android emulator or device using the Yarn command.

```bash
yarn android
```

--------------------------------

### selectDomRoot Configuration

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineconfig

A callback function to select the root DOM node for rendering.

```typescript
selectDomRoot?: (node: NodeWithChildren) => any;
```

--------------------------------

### Insert Content into a Div

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Demonstrates inserting new content into a DOM node using the `onElement` visitor. This example adds a new paragraph inside a `<div>` tag.

```javascript
import { TElement, TNode, TChildren } from 'react-native-render-html';

function insertContentInDiv(node: TElement) {
  if (node.name === 'div') {
    const newParagraph: TNode = {
      type: 'text',
      data: 'This is inserted content!'
    };
    const children = node.children as TChildren;
    children.push(newParagraph);
  }
}

```

--------------------------------

### Styles Configuration Option

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineoptions

Configure various styling aspects using `stylesConfig`.

```typescript
stylesConfig?: StylesConfig;
```

--------------------------------

### htmlParserOptions

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineoptions

Allows configuration of the htmlparser2 library parser.

```APIDOC
## htmlParserOptions

### Description
Options for htmlparser2 library parser.

### Type
`Readonly<ParserOptions>`
```

--------------------------------

### systemFonts

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineconfig

A list of system fonts available on the platform.

```APIDOC
## systemFonts

### Description

An optional list of font names available on the current platform. These fonts are used to match the `fontFamily` CSS property, which can specify a comma-separated list of fonts.

### Remarks

- Any `fontFamily` specified in styles must be registered here or included in the default list.
- If using Expo, consider using or extending `Constants.systemFonts`.

### Example

```javascript
import RenderHTML, { defaultSystemFonts } from 'react-native-render-html';

// Replace defaultSystemFonts with Constants.systemFonts if using expo
const systemFonts = [...defaultSystemFonts, 'Mysuperfont'];

// ...
<RenderHTML systemFonts={systemFonts} ... />
```

### Type

```typescript
systemFonts?: string[];
```
```

--------------------------------

### IMGElementStateSuccess Fields

Source: https://meliorence.github.io/react-native-render-html/api/imgelementstatesuccess

Details the fields within the IMGElementStateSuccess interface, including their types and whether they are required. Note that onError is a required callback for handling image loading errors.

```typescript
alt?: string;
```

```typescript
altColor?: string;
```

```typescript
containerStyle: ViewStyle;
```

```typescript
dimensions: ImageDimensions;
```

```typescript
imageStyle: ImageStyle;
```

```typescript
onError: (error: Error) => void;
```

```typescript
source: ImageURISource;
```

```typescript
type: "success";
```

--------------------------------

### Extracting Native Props with getNativePropsForTNode

Source: https://meliorence.github.io/react-native-render-html/api/getnativepropsfortnode

Use getNativePropsForTNode to retrieve native props for a TNode. This is useful for custom renderers, for example, replacing the default Text component with Animated.Text.

```typescript
import React from 'react';
import { Animated } from 'react-native';
import { CustomTextualRenderer, getNativePropsForTNode } from 'react-native-render-html';

const AnimatedSpanRenderer: CustomTextualRenderer = (props) => {
  const nativeProps = getNativePropsForTNode(props);
  // This is equivalent to a TDefaultRenderer which `Text` is replaced
  // with Animated.Text
  return <Animated.Text {...nativeProps} />;
}
```

--------------------------------

### Render TOC in ArticleScreen

Source: https://meliorence.github.io/react-native-render-html/blog/2021/06/28/create-blog-app-rnrh-II

Integrates the `TOC` component into the `ArticleScreen` using a `DrawerLayout`. The `TOC` is rendered in the navigation view of the drawer, allowing users to open it to see the table of contents. Requires imports for `TOC`, `useCallback`, `useSetTitleEffect`, `useArticleDom`, `useDrawer`, and `DrawerLayout`.

```typescript
// other imports
import TOC from '../components/TOC';
// ...
export default function ArticleScreen(props: ArticleScreenProps) {
useSetTitleEffect(props);
const { dom, headings } = useArticleDom(props.route.params.url);
const { drawerRef, openDrawer } = useDrawer();
const onPressEntry = useCallback((entry: string) => {
// We'll handle that later
}, []);
const renderToc = useCallback(
function renderToc() {
return <TOC headings={headings} onPressEntry={onPressEntry} />;
},
[headings]
);
return (
<DrawerLayout
drawerPosition="right"
drawerWidth={300}
renderNavigationView={renderToc}
ref={drawerRef}>
<ArticleBody dom={dom} />
<FAB
style={styles.fab}
color="#61dafb"
icon="format-list-bulleted-square"
onPress={openDrawer}
/>
</DrawerLayout>
);
}
// styles
```

--------------------------------

### baseUrl Field Example

Source: https://meliorence.github.io/react-native-render-html/api/documentmetadata

The base URL of the resource, influencing how relative URLs are resolved. It is determined by the `<base>` HTML element, the `source.baseUrl` prop, or the origin of the `source.uri` prop.

```typescript
baseUrl: string;
```

--------------------------------

### WebView

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

The WebView component used by plugins (iframe, table). Defaults to a component that returns null.

```APIDOC
## WebView

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

### Type
```typescript
ComponentType<any>
```

### Optional
`true`

### Default
`() => null`
```

--------------------------------

### TRenderEngineProvider Props Definition

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineprovider

Specifies the required props for the TRenderEngineProvider component, which includes 'props' of type PropsWithChildren<TRenderEngineConfig>. This setup is crucial for passing configuration and children to the provider.

```typescript
props: PropsWithChildren<TRenderEngineConfig>;
```

--------------------------------

### selectDomRoot

Source: https://meliorence.github.io/react-native-render-html/api/renderhtmlprops

An optional function to select the DOM root before TTree generation. This allows you to specify a particular element as the root for rendering, for example, by iterating over children to find an article element.

```APIDOC
## selectDomRoot

### Description
Select the DOM root before TTree generation. For example, you could iterate over children until you reach an article element and return this element.

### Type
`(node: NodeWithChildren) => any`
```

--------------------------------

### useIMGElementStateProps Interface

Source: https://meliorence.github.io/react-native-render-html/api/useimgelementstateprops

The `UseIMGElementStateProps` interface defines the structure of the props that can be passed to the `useIMGElementState` hook. These props control various aspects of how an image is rendered, including its source, dimensions, styling, and accessibility.

```APIDOC
## Interface: UseIMGElementStateProps

### Description
Props for the `useIMGElementState` hook.

### Fields

#### `alt`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt text extracted from the `alt` attribute.

#### `altColor`
- **Type**: `string`
- **Optional**: Yes
- **Description**: Alt color, defaults to `color` for this `TNode`.

#### `cachedNaturalDimensions`
- **Type**: `ImageDimensions`
- **Optional**: Yes
- **Description**: When the natural ("physical") dimensions for this image are accessible _a priori_, these should be passed. It will save some API calls and filesytem access via React Native Image.getSize.

#### `computeMaxWidth`
- **Type**: `(contentWidth: number) => number`
- **Optional**: Yes
- **Description**: When provided, the print image will have a max width depending on the `contentWidth` prop.

#### `contentWidth`
- **Type**: `number`
- **Optional**: Yes
- **Description**: The `contentWidth` from the `RenderHTMLProps`.

#### `enableExperimentalPercentWidth`
- **Type**: `boolean`
- **Optional**: Yes
- **Description**: Allow experimental percent width for the print dimensions computation. The percent will be relative to `contentWidth`.

#### `height`
- **Type**: `string | number`
- **Optional**: Yes
- **Description**: The value of the `height` attribute.

#### `initialDimensions`
- **Type**: `ImageDimensions`
- **Optional**: Yes
- **Description**: Rendered dimensions prior to retrieving natural dimensions of the image.

#### `objectFit`
- **Type**: `ObjectFit`
- **Optional**: Yes
- **Description**: The value of the `object-fit` CSS property.

#### `source`
- **Type**: `ImageURISource`
- **Required**: Yes
- **Description**: The source to paint.

#### `style`
- **Type**: `StyleProp<ImageStyle>`
- **Optional**: Yes
- **Description**: The style for this image.

#### `width`
- **Type**: `string | number`
- **Optional**: Yes
- **Description**: The value of the `width` attribute.
```

--------------------------------

### Remove First Two Children of an Ol Tag

Source: https://meliorence.github.io/react-native-render-html/docs/guides/dom-tampering

Use the `domVisitors` prop with `onElement` to modify the DOM tree. This example removes the first two children of an `<ol>` tag.

```javascript
import { TChildren, TNode } from 'react-native-render-html';

function removeFirstTwoChildrenOfOl(node: TNode) {
  if (node.name === 'ol') {
    const children = node.children as TChildren;
    if (children.length > 2) {
      children.splice(0, 2);
    }
  }
}

```

--------------------------------

### Custom Renderer with useTNodeChildrenProps

Source: https://meliorence.github.io/react-native-render-html/api/usetnodechildrenprops

Use this hook when you need to modify children in a custom renderer. It should be used in conjunction with TChildrenRenderer. This example demonstrates inserting ads between rendered content chunks.

```javascript
function ArticleRenderer(props) {
const { tnode, TDefaultRenderer, ...defaultRendererProps } = props;
const tchildrenProps = useTNodeChildrenProps(props);
const firstChildrenChunk = tnode.children.slice(0, 2);
const secondChildrenChunk = tnode.children.slice(2, 4);
const thirdChildrenChunk = tnode.children.slice(4, 5);
return (
<TDefaultRenderer tnode={tnode} {...defaultRendererProps}>
<TChildrenRenderer {...tchildrenProps} tchildren={firstChildrenChunk} />
{firstChildrenChunk.length === 2 ? <AdComponent /> : null}
<TChildrenRenderer {...tchildrenProps} tchildren={secondChildrenChunk} />
{secondChildrenChunk.length === 2 ? <AdComponent /> : null}
<TChildrenRenderer {...tchildrenProps} tchildren={thirdChildrenChunk} />
</TDefaultRenderer>
);
};
```

--------------------------------

### Defining Custom Element with reactNativeProps

Source: https://meliorence.github.io/react-native-render-html/api/elementmodelbase

Creates a custom HTML element model 'nav-button' with specific React Native props. This example defines an 'onPress' handler for the native component.

```typescript
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');
        },
      },
    },
  }),
};

```

--------------------------------

### stylesConfig

Source: https://meliorence.github.io/react-native-render-html/api/trenderengineoptions

Provides various configurations for styling, including CSS processor options and custom HTML models.

```APIDOC
## stylesConfig

### Description
Various configuration for styling.

### Type
`StylesConfig`
```

--------------------------------

### Image with Object Fit Contain

Source: https://meliorence.github.io/react-native-render-html/docs/content/images

Demonstrates using the `object-fit: contain;` CSS property to letterbox images within their containers. This example sets the image width to 50% and height to 100px.

```javascript
const htmlContent = `
<img
  src="https://example.com/image.jpg"
  style="width: 50%; height: 100px; object-fit: contain;"
/>
`;

<RenderHTML source={{ html: htmlContent }} contentWidth={300} />
```

--------------------------------

### Build TRenderEngine from Configuration

Source: https://meliorence.github.io/react-native-render-html/api/buildtrefromconfig

Use this function to create a TRenderEngine instance from a configuration object. It's particularly helpful for testing and debugging the TRE layer of your application.

```typescript
export
function buildTREFromConfig(
  props: TRenderEngineConfig
): TRenderEngine
```
Tokens:
Raw