how to open any link from react native render Html

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React native render HTML provides the feature to render anchor tag or link in your HTML content but you want the link is clickable then you have to some extra stuff.

We know when we want to open any link from react native app we use react native linking to redirect the app to the browser and open the URL.

So, we have to do the same thing here also for open URLs or you want to click on the link.

Follow the below steps to make your HTML link clickable.

Step 1: Add on link press props

React native render HTML provides props onLinkPress to handle link.

Add these props to your HTML component

<HTML 
    ...
    onLinkPress={(evt, href) => { console.log(href) }}
    ...
/>

Step 2: use linking with render HTML

import linking from react native

import { Linking  } from 'react-native';

<HTML 
    ...
    onLinkPress={(evt, href) => { Linking.openURL(href) }}
    ...
/>

Step 3: Complete Example to implement working link


import React, { Component } from "react";
import { ScrollView, useWindowDimensions, Linking } from "react-native";
import HTML from "react-native-render-html";

const htmlContent = `
    <h1>This HTML snippet is now rendered with native components !</h1>
    <h2>Enjoy a webview-free and blazing fast application</h2>
    <a href="https://infinitbility.github.io" >infinitbility.github.io</h2>
    <img src="https://i.imgur.com/dHLmxfO.jpg?2" />
    <em style="textAlign: center;">Look at how happy this native cat is</em>
`;

export default function Demo() {
  const contentWidth = useWindowDimensions().width;
  return (
    <ScrollView style={{ flex: 1 }}>
        <HTML 
            source={{ html: htmlContent }} 
            contentWidth={contentWidth} 
            onLinkPress={(evt, href) => { Linking.openURL(href) }}
        />
    </ScrollView>
  );
}

Thanks for reading…

how to open any link from react native render Html

Step 1: Add on link press props

Step 2: use linking with render HTML

Step 3: Complete Example to implement working link

More From React Native Tutorial

Basics

Advances

Error & Issue Solution

Step 1: Add on link press props#

Step 2: use linking with render HTML#

Step 3: Complete Example to implement working link#

More From React Native Tutorial#

Basics#

Advances#

Error & Issue Solution#

Step 1: Add on link press props

Step 2: use linking with render HTML

Step 3: Complete Example to implement working link

More From React Native Tutorial

Basics

Advances

Error & Issue Solution