Anchors

note

Anchors are rendered with an internal renderer. See Rendering page. The content model of anchors is mixed, see Element Models.

Minimal Example#

Minimal Anchor Example

JSX Source
HTML Snippet
TRT Snapshot

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `<a
  href="https://developer.mozilla.org/"
  style="text-align:center;">
    A link to MDN!
</a>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

Press on the button below to show how this code renders on your device.

note

By default, pressing an anchor will open the link in the system browser. This is done with React Native Linking API.

Block Example#

In the below example, the anchor will be translated to a TNode node, because some of its children (<img>) have a block content model. This is a feature of the mixed content model.

Block Anchor Example

JSX Source
HTML Snippet
TRT Snapshot

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `<a href="https://developer.mozilla.org/">
  This text can be clicked.
  <img src="http://placeimg.com/1200/800/nature" />
  An the image too!
</a>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

Press on the button below to show how this code renders on your device.

Relative URLs#

The HTML standard allows relative URLs, for example when anchors have a href attribute with no origin, such as <a href="contact.html">. The new foundry release adheres closely to this standard, by extracting information about the baseUrl of the current page. Either by the mean of the <base> element, or by information contained in the source prop. Example:

Relative URLs Resolution Example

JSX Source
HTML Snippet
TRT Snapshot

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';

const source = {
  html: `<html>
  <head>
    <base href="https://developer.mozilla.org/"></base>
  </head>
  <body style="margin: 10px;">
    <header>
      <nav>
        <strong>MDN Technologies</strong>
        <a href="docs/Web/HTML">HTML</a>
        <a href="docs/Web/CSS">CSS</a>
        <a href="docs/Web/JavaScript">JavaScript</a>
        <a href="docs/Web/HTTP">HTTP</a>
        <a href="docs/Web/API">APIs</a>
        <a href="docs/Web/MathML">MathML</a>
      </nav>
    </header>
  </body>
</html>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

Press any of the anchors and notice that the URL is being normalized from the base URL.

Press on the button below to show how this code renders on your device.

tip

You can use the same URL normalization mechanism in your custom renderers thanks to useNormalizedUrl hook.

Configuring#

We can take advantage of the renderersProps to customize anchors behavior (see RenderersProps.a). Anchors support onPress prop to handle press events.

Customizing Anchor Behavior

JSX Source
HTML Snippet
TRT Snapshot

import React from 'react';
import RenderHtml from 'react-native-render-html';
import { useWindowDimensions, Alert } from 'react-native';

function onPress(event, href) {
  Alert.alert(`You just pressed ${href}`);
}

const source = {
  html: `<a
  href="https://developer.mozilla.org/"
  style="text-align:center;">
    A link to MDN!
</a>`
};

const renderersProps = {
  a: {
    onPress: onPress
  }
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
      renderersProps={renderersProps}
    />
  );
}

Press on the button below to show how this code renders on your device.