search

meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

Link on Android not work #546

Closed dkjeune closed 2 years ago

dkjeune commented 2 years ago

Decision Table

Good Faith Declaration

Description

When I click on a link on IOS, it open the browser. On Android, nothing happen. Any help ?

React Native Information

No browser open on android

RNRH Version

last version

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

nope

Additional Notes

No response

jsamr commented 2 years ago

Thank you @dkjeune for taking time to fill this report. Unfortunately, the report doesn't provide the least minimal reproduction, not even the HTML that would produce the issue you are reporting. I am going to close the issue now as this is not actionable for us, but if a viable reproduction is to be provided, I will reopen.

eithe commented 2 years ago

Not that it helps, but I'm getting reports of the same (perhaps only some Android devices?), and I was finally able to reproduce it on a Pixel 2 API 30 emulator running Android 11.

I didn't have time to debug this further, but I have a common component that renders html in the app (that uses react-native-render-html) so what I did as a workaround was just to handle onPress manually like so:

<HTML
  ...
  renderersProps={{
    a: {
      onPress: (_, href) => {
        Linking.openURL(href);
      },
    },
  }}
  source={{ html }}
/>
jsamr commented 2 years ago

@eithe Would you mind providing the HTML code, React Native version and RNRH version that triggered this undesired behavior? I tried with the same emulator configuration as you did, and the link press worked (React Native 0.64). My code snippet looked like this:

<a href="https://google.com/">This is a test</a>
eithe commented 2 years ago

Good point, @jsamr. I must admit I was running RNRH 6.1.0, but I upgraded to 6.3.3 now. RN 0.65.1.

This does not work: test This does: test2

I get that this is quite hard for you to debug, it should be our responsibility to create a minimal example where it fails instead of you having to dig.

Edit: Please ignore the difference on defaultWebViewProps, just something that changed when I removed stuff to simplify the example. Have now tried with no defaultWebViewProps on both tests just to make sure.

jsamr commented 2 years ago

Thanks @eithe for providing this additional information. I managed to reproduce the issue by upgrading from RN 0.64 to RN 0.67 on my "sandbox" project that I use for testing! Now I can investigate...

jsamr commented 2 years ago

I found the issue. Check the implementation of the default A press handler:

https://github.com/meliorence/react-native-render-html/blob/073d4db2f2ddab63bdd036045f68e1cd781a8d2d/packages/render-html/src/context/defaultRendererProps.ts#L4-L8

For a reason yet to determine, await Linking.canOpenURL(href) ceased returning true for HTTP(S) URIs on Android. This is obviously a bug on React Native side, but I will have to take it into account and provide a fix.

eithe commented 2 years ago

Nice find, @jsamr! Thanks for investigating and thanks again for your efforts on this project, greatly appreciated.

jsamr commented 2 years ago

I've opened a ticket on React Native issue tracker https://github.com/facebook/react-native/issues/32960

jsamr commented 2 years ago

Fix has been released https://github.com/meliorence/react-native-render-html/releases/tag/v6.3.4

jsamr commented 2 years ago

@eithe Thanks for the sponsor and kind feedback, it always lifts one's spirit!

iphonic commented 2 years ago

@jsamr How do you access this.state inside onPress?

const renderersProps = {
    a: {
      onPress(event, url, htmlAttribs, target) {
        if (url.includes('tc')) {
            this.setState({showTerms:true,showPrivacy:false})
        }else if (url.includes('pv')) {
            this.setState({showTerms:false,showPrivacy:true})
        }
      }
    }
  }