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

Cannot set height of iframe inside webview using defaultWebViewProps.style #620

Open AllanJonna opened 1 year ago

AllanJonna commented 1 year ago

Decision Table

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

Tested Platforms

Reproduction Platforms

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 1 year ago

what a bad markdown style, what a shame.