React-native-render-html: onLinkPress throwing an error

Created on 30 Sep 2018 · 8Comments · Source: meliorence/react-native-render-html

Is this a bug report or a feature request?

BUG

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

Yes, several times and there are things about that aren't entirely clear or complete IMO.
The section on Styles, needs clearer examples, as well as to how to implement onLinkPress.

Have you made sure that your issue hasn't already been reported/solved?

Yes.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I was able to reproduce this on iOS. I don't have the android simulator set up or an Android device to check this on.

Is the bug reproducible in a production environment (not a debug one)?

Yes. I only have the one for now. So yes.

Have you been able to reproduce the bug in the provided example?

You know I'd love to be able to load that thing up on my device but it keeps throwing errors. So...ummmm no.

Environment

react-native-cli: 2.0.1
react-native: 0.55.4
react-native-render-html: 3.10.0

Target Platform:
iOS (11.4)

Steps to Reproduce

1.) Wrote a line of code like >

        <HTML
          html={item.excerpt.rendered}
          onLinkPress
        />

Loaded expo/on my device and simulator.

Expected Behavior

When I press a link, a browser window should open.

Actual Behavior

Error thrown.

img_6a370494aab3-1

Reproducible Demo

Removed :-)

Source

magicmiles

Most helpful comment

Figured it out. There's a library called LINKING that's stated in the demo that allows for this call to work: onLinkPress: (evt, href) => { Linking.openURL(href); },

magicmiles on 2 Oct 2018

👍4

All 8 comments

@magicmiles It looks like you haven't supplied a function to "onLinkPress" to be called when the link is clicked.

Try:

onLinkPress={(href, attribs)=>{console.info(href, attribs)}}

tclarke-scottlogic on 2 Oct 2018

@tclarke-scottlogic actually in the latest version of the code, I did add exactly what you suggested. Only now, I'm not getting anything back. The app just crashes in expo! The link is highlighted and stays that way until the app crashes.

Still I have a primary question, shouldn't that function look something like:

onLinkPress (evt, href, htmlAttribs) {
    alert(`Opened ${href} ! Attributes: ${JSON.stringify(htmlAttribs)}`);
}

My point is when I do that, I get the error above.

However when I console log the thing like I did above, thanks for the suggestion by the way, my app freezes. You can see the updated code in the snack provided above.

magicmiles on 2 Oct 2018

onLinkPress (evt, href, htmlAttribs) {
    alert(`Opened ${href} ! Attributes: ${JSON.stringify(htmlAttribs)}`);
}

I think this would try and define a new function called onLinkPress in the middle of the element, whereas you want to assign a function to the onLinkPress property.

If you mean, should it have three parameters, then yes, that's my mistake.

I can't find how to log to console properly, so I added a text field to capture the href, and it definitely works. Also applied your alert code:

https://snack.expo.io/rk8K_lW5Q

tclarke-scottlogic on 2 Oct 2018

If you wanted to do it without the lambda, you'd have to use binding to ensure the "this" variable referred to the correct object.
https://snack.expo.io/SkrPFgZ9X

tclarke-scottlogic on 2 Oct 2018

@tclarke-scottlogic Hey! Well that's an improvement. All I was getting was errors. Never thought of throwing it up into an alert when pressed. Great, nice feedback. I hate going out to the console log every 20 seconds. Thanks for the tip. I know I posted that, now that I see what it's actually doing, _but_ I was borrowing from the demo that was doing the same thing. I'm still a noob with this stuff. All I really want is for the user to press the link and go to the supplied URL. And still can't figure out how to get it to do that. I don't need the lambda. I just want the damned thing to work at this point so I can move on...

As to the proper console log statement, it should be: console.log('href pressed: ', href). But I like your setting state like that as textual feedback loop. Very nice touch. I have to remember that one.

magicmiles on 2 Oct 2018

👍1

Figured it out. There's a library called LINKING that's stated in the demo that allows for this call to work: onLinkPress: (evt, href) => { Linking.openURL(href); },

magicmiles on 2 Oct 2018

👍4

@magicmiles Yeah, I was going to point you at Linking, but I figured that was the easy part once you'd solved whatever syntax issue you were running into, so we should solve that first.

~~What I meant was that snack appears not to expose console logs cleanly, unless I missed something.~~
Edit: Found the cunningly concealed "LOGS" panel.

Glad to have helped!

tclarke-scottlogic on 2 Oct 2018

@tclarke-scottlogic Thomas, thanks for the assist. However, the lib still shouldn't throw an error like that. I think onLinkPress should be a bit more graceful and just not function without the directives present. 👎 While we're in a helping mood, if you wanna take a crack at my other little styling problem and I can close that one too. I looked at your issue and I haven't got a clue how to solve that one. Way over my head. Styling Issue > https://github.com/archriss/react-native-render-html/issues/185

magicmiles on 2 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings