Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iframes starting with a two forward slashes src attributes are not rendered #408

Closed
1 task done
workhub90 opened this issue Sep 17, 2020 · 13 comments
Closed
1 task done

iframes starting with a two forward slashes src attributes are not rendered #408

workhub90 opened this issue Sep 17, 2020 · 13 comments
Labels
bug Crush'em all. is:missing reproduction We require a minimal reproduction to help you out!

Comments

@workhub90
Copy link

workhub90 commented Sep 17, 2020 •
edited
Loading

Oath

I swear that I have completed these tasks before submitting:

Hello archriss, please help me about this bug or some trouble.
images and text are all displayed successfully. however, only the youtube video link does not appear. any suggestions?

version package react-native-render-html@4.1.2
tested device : emulator & real device.

Here's a quick source:
......

<HTML
html={this.props.article.description}
baseFontStyle={styles.textContent}
onLinkPress={(event, href, htmlAttribs) => this.props.openLink(href)}
/>

.......

Screenshot_2020-09-15-19-37-41-18
Screenshot_2020-09-15-19-39-37-37
@jsamr
Copy link
Collaborator

jsamr commented Sep 17, 2020 •
edited
Loading

@workhub90 As a starting point to resolve your issue, I suggest you upgrade to the latest 4.2.3 (you'll need to install react-native-webview manually, this was an error on our end breaking semantic versioning!).

If that doesn't work out for you, I invite you to provide a full reproduction, see https://github.com/archriss/react-native-render-html/blob/master/CONTRIBUTING.adoc#submitting-a-bug

EDIT: the reproduction must include the HTML content that is causing trouble.

@jsamr jsamr added the is:missing reproduction We require a minimal reproduction to help you out! label Sep 17, 2020
@workhub90 workhub90 reopened this Sep 17, 2020
@workhub90
Copy link
Author

hello @jsamr i've tried your suggestion.

  1. upgrade react-native-render-html to newer 4.2.3
  2. install manually react-native-webview with this documentation
    https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b. i used newer version 10.9.0

is still same error. does'nt work.

i had tested in emulator & real device

Screen Shot 2020-09-17 at 23 11 07
Screenshot_1600366559

@jsamr
Copy link
Collaborator

jsamr commented Sep 17, 2020

@workhub90 To help you out, I need to know what is the HTML code you are trying to render, that is the content of the string you are passing to html prop (this.props.article.description).

@jsamr
Copy link
Collaborator

jsamr commented Sep 17, 2020 •
edited
Loading

I am starting to understand; I was confused because you said "the video link", so I thought you were talking about anchors (<a> elements). You are probably referring to an iframe element. The same remains true, cannot help you without the HTML source! This library support iframes now (will be moved out to a plugin for next major release) so I am yet unsure what is problematic here.

@jsamr jsamr added the is:waiting for feedback Waiting for OP input. label Sep 17, 2020
@workhub90
Copy link
Author

@jsamr here the html i want to display.
Screen Shot 2020-09-18 at 10 05 55

you can see here on web everything shown. text, image and youtube video embeded.
but, when in mobile only youtube video embeded not shown.
Screenshot_1600401237

and yeah i had checked. using <iframe/> element please check images below.
but, youtube video embeded. still not shown.

@jsamr
Copy link
Collaborator

jsamr commented Sep 19, 2020

@workhub90 With all regards, I don't have much time to investigate this issue as it is right now. If you can provide a full reproduction in the form of an expo snack or git repository, I'll be willing to investigate further though. I kindly invite you to follow our contribution guidelines here: https://github.com/archriss/react-native-render-html/blob/master/CONTRIBUTING.adoc#submitting-a-bug

@jsamr
Copy link
Collaborator

jsamr commented Sep 20, 2020

@workhub90 I reviewed this issue a little further, and realized that the iframe src attribute is starting with two-forward slashes! Like this //www.... I guess we should handle this situation better. I'll try to implement a fix.

@jsamr
Copy link
Collaborator

jsamr commented Sep 20, 2020

@workhub90 In the meantime, you can "fix" the src attribute with alterNode prop.

@jsamr jsamr added the bug Crush'em all. label Sep 20, 2020
@jsamr jsamr changed the title <HTML LINK YOUTUBE VIDEO NOT SHOWN iframe starting with a two forwarded slashes src attributes are not rendered Sep 20, 2020
@jsamr jsamr changed the title iframe starting with a two forwarded slashes src attributes are not rendered iframes starting with a two forwarded slashes src attributes are not rendered Sep 20, 2020
@jsamr jsamr changed the title iframes starting with a two forwarded slashes src attributes are not rendered iframes starting with a two forward slashes src attributes are not rendered Sep 20, 2020
@jsamr jsamr removed the is:waiting for feedback Waiting for OP input. label Sep 20, 2020
jsamr added a commit that referenced this issue Sep 20, 2020
@jsamr
tests: provide regression against #408, iframe src attr //
a83cff1
jsamr added a commit that referenced this issue Sep 20, 2020
@jsamr
fix: normalize src attributes starting with two slashes "//"
fa0f8b4 
fix #408
@jsamr
Copy link
Collaborator

jsamr commented Sep 20, 2020

@workhub90 Version 4.2.4-beta.1 has just been released, it should work now!

jsamr added a commit that referenced this issue Sep 20, 2020
@jsamr
tests: provide regression against #408, iframe src attr //
77b74b0
@jsamr jsamr closed this as completed in 68dd6e8 Sep 20, 2020
@workhub90
Copy link
Author

wow great, @jsamr thank you for your updated. now its work.

@jsamr
Copy link
Collaborator

jsamr commented Sep 25, 2020

A fix has been released in v4.2.4 a few moments ago.

@skizzo
Copy link

skizzo commented Jun 20, 2023

Is there currently any way of displaying an iframe, say, for an embedded YouTube video? The docs are everything but clear on this. Thanks

@jsamr
Copy link
Collaborator

jsamr commented Jun 20, 2023

@skizzo https://meliorence.github.io/react-native-render-html/docs/faq#how-to-render-iframes

@meliorence meliorence locked as off-topic and limited conversation to collaborators Jun 20, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Crush'em all. is:missing reproduction We require a minimal reproduction to help you out!
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@skizzo @jsamr @workhub90