0

In my expo / react app I have some HTML from a website that I'm pulling from an api. I'd like to use links within that html to link to pages within the app. Some example html...

responseHtml = "<p>this is a paragraph <a href="http://example.com/some-page">Some Page</a><p>"

then I was thinking I would do some string replace so that the html ends up looking like this...

responseHtml = "<p>this is a paragraph <a href="exp://something/Article/some-page">Some Page</a><p>"

Then I would render the content in my app and the links would work if I did something like this...

<HTML onLinkPress={(event, href)=>{Linking.openURL(href)}} html="{responseHtml}" />

I cannot seem to find the right href value to make a successful click to a page within the app. I've tried using the full path, exp://127.0.0.1:19200/Article/some-page, I've tried relative links like /Article/some-page, and I've tried setting a schema value to "myapp" in the app.json and linking to it with myapp://Article/some-page

Richard
  • 5,584
  • 1
  • 19
  • 22

1 Answers1

-1

Have you tried to parse it ? I would use the react-native-htmlview library. There you can customize the Link handler. So you could open the link or pass it down as prop. Your code could be look like this:

import React from 'react';
import HTMLView from 'react-native-htmlview';

class App extends React.Component {
  render() {
    const responseHTML = ``;

    return (
      <HTMLView
        value={htmlContent}
        stylesheet={{
         fontWeight: '300',
         color: '#FF3366', // make links coloured pink
        }}
      />
    );
  }
}

If you want to do any custom actions with your link it could look like this:

return (
  <HTMLView
    value={this.props.putyourhtmlhere}
    onLinkPress={(url) => console.log('clicked link: ', url)}
  />
);

Hope that helps

cosnavel
  • 1
  • 3