meliorence/react-native-render-html

Cannot set height of iframe inside webview using defaultWebViewProps.style

AllanJonna opened this issue · 1 comments

AllanJonna commented

Decision Table

  • My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
  • My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

Description

I was trying to embed an Instagram post from HTML of string that included iframe in it. It was running well, but the problem is I was not able to edit the height of the iframe or the webview so it looks like got truncated for the post and the fact am I able to set the width of webview using defaultWebViewProps.style props but it doesn't work for the height one. My question is how can I set the height of the webview so the embeded Instagram post will looks better ? Thank you.

Screen Shot 2023-03-02 at 13 30 10

React Native Information

System:
    OS: macOS 11.7.1
    CPU: (8) arm64 Apple M1
    Memory: 149.91 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.6 => 0.70.6

RNRH Version

  • react-native-render-html : ^6.3.4

Tested Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Reproduction Platforms

  • Android
  • iOS
  • Web
  • MacOS
  • Windows

Minimal, Reproducible Example

import HTML from 'react-native-render-html'; import WebView from 'react-native-webview'; import IframeRenderer, {iframeModel} from '@native-html/iframe-plugin';

` const renderers = {
iframe: IframeRenderer,
};

const customHTMLElementModels = {
iframe: iframeModel,
};

const {width} = useWindowDimensions();`

const url = '<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.instagram.com/p/Co20n98vptN/?igshid=YmMyMTA2M2Y="></iframe><p><br></p><p class="ql-align-center">embed instagram </p><p><br></p><p><br></p><iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/watch?v=4GAsmHYwTfg"></iframe><p class="ql-align-center"><br></p><p class="ql-align-center">embed youtube</p><p class="ql-align-center"><br></p>'

<View style={{flex: 1}}> <HTML source={{ html: url, }} contentWidth={width - 20} tagsStyles={{ br: { marginBottom: 0, }, p: { marginBottom: -15, }, iframe: { opacity: 0.99, }, }} renderersProps={{ iframe: { scalesPageToFit: true, style: { width: '100%', height: 1000, }, }, }} renderers={renderers} WebView={WebView} customHTMLElementModels={customHTMLElementModels} enableExperimentalBRCollapsing={true} enableExperimentalMarginCollapsing={true} enableExperimentalGhostLinesPrevention={true} dangerouslyDisableWhitespaceCollapsing={true} defaultWebViewProps={{ style: { width: '100%', height: 100, marginTop: 10, }, }} /> </View>

Additional Notes

No response

linonetwo commented

what a bad markdown style, what a shame.