[iframe-plugin] html string with iframe, iframe will not work about plugins HOT 8 CLOSED

@agoudsmit Tell me if that works out for you:

import React, {Component} from 'react';
import {StyleSheet, SafeAreaView, Dimensions, View} from 'react-native';

import {
  iframeModel,
  HTMLIframe,
  useHtmlIframeProps,
} from '@native-html/iframe-plugin';
import RenderHTML, {
  RenderHTMLProps,
  CustomRendererProps,
  TBlock,
  CustomBlockRenderer,
} from 'react-native-render-html';
import WebView from 'react-native-webview';

const FixedIFrameRenderer: CustomBlockRenderer = (props) => {
  const iframeProps = useHtmlIframeProps(props);
  if (!iframeProps) {
    return null;
  }
  const {width, height} = StyleSheet.flatten(iframeProps.style);
  return (
    <View style={{width, height}}>
      <HTMLIframe {...iframeProps} />
    </View>
  );
}

const htmlConfig: Partial<RenderHTMLProps> = {
  renderers: {
    iframe: FixedIFrameRenderer,
  },
  customHTMLElementModels: {
    iframe: iframeModel,
  },
  WebView,
};

export default class Oefening extends Component {
  constructor(props: any) {
    super(props);
    this.state = {};
  }

  render() {
    const htmlContent = `
    <h1>VR Lorem ipsum dolor sit amet, consectetur adipiscing elit. !</h1>
    <p>iframe</p>
    <iframe src="https://www.youtube.com/embed/fnCmUWqKo6g"></iframe>
    <p>end iframe</p>
    <p>Vivamus bibendum feugiat pretium. <a href="https://reactnativemaster.com/">Vestibulum ultricies rutrum ornare</a>. Donec eget suscipit tortor. Nullam pellentesque nibh sagittis, pharetra quam a, varius sapien. Pellentesque ut leo id mauris hendrerit ultrices et non mauris. Quisque gravida erat at felis tincidunt tincidunt. Etiam sit amet egestas leo. Cras mollis mi sed lorem finibus, interdum molestie magna mollis. Sed venenatis lorem nec magna convallis iaculis.</p>
    
`;

    return (
      <SafeAreaView style={{flex: 1}}>
        <RenderHTML
          {...htmlConfig}
          source={{html: htmlContent}}
          contentWidth={Dimensions.get('window').width}
        />
      </SafeAreaView>
    );
  }
}

from plugins.

@agoudsmit I could reproduce your problem and I am investigating. However, I am not getting this warning:

The "iframe" tag is a valid HTML element but is not handled by this library. You must register a custom renderer or plugin and make sure its content model is not set to "none". If you don't want this tag to be rendered, add it to "ignoredTags" prop array.

You should not have this warning since you provided customHTMLElementModels.

Anyway, I could reproduce the fact that nothing is displayed. It is strange that the issue doesn't surface on Expo but only on vanilla RN... If I open the devtools, I can see the WebView, and its width and height set appropriately, but it is not painted. I am betting on a react-native-webview bug; but I must create a reproduction to prove it.

Could you tell me on which platforms you have tested and reproduced the issue?

from plugins.

@jsamr thanks for the quick reply. I spent the last days trying to find a solution :)
Im working on mac osx 10.15, xcode 12.4 and the iOS simulator is running 14.4

this is my package.json for the project

{
  "name": "SlaapWaak",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@eliav2/react-native-collapsible-view": "1.3.2",
    "@native-html/iframe-plugin": "2.5.0",
    "@react-native-community/async-storage": "1.12.1",
    "@react-native-community/checkbox": "0.5.8",
    "@react-native-community/cli": "5.0.1",
    "@react-native-community/datetimepicker": "3.5.2",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-firebase/app": "12.4.0",
    "@react-navigation/native": "5.9.4",
    "@react-navigation/stack": "5.14.5",
    "accordion-collapse-react-native": "1.0.1",
    "eslint-config-prettier": "8.3.0",
    "react": "17.0.1",
    "react-native": "0.64.1",
    "react-native-gesture-handler": "1.10.3",
    "react-native-localize": "2.1.1",
    "react-native-media-controls": "2.3.0",
    "react-native-reanimated": "2.1.0",
    "react-native-render-html": "6.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-safe-area-view": "1.1.1",
    "react-native-screens": "3.3.0",
    "react-native-snap-carousel": "3.9.1",
    "react-native-splash-screen": "3.2.0",
    "react-native-svg": "12.1.1",
    "react-native-svg-transformer": "0.14.3",
    "react-native-swipe-list-view": "3.2.8",
    "react-native-video": "5.1.1",
    "react-native-webview": "11.14.0",
    "react-navigation": "4.4.4",
    "react-navigation-stack": "2.10.4",
    "realm": "10.5.0"
  },
  "devDependencies": {
    "@babel/core": "7.14.3",
    "@babel/runtime": "7.14.0",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

from plugins.

@agoudsmit I think I found out a workaround. I can confirm there is a bug with react-native-webview, I could reproduce your issue without this library, by just nesting the WebView in two Views:

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import WebView from 'react-native-webview';

export default function BlankWebView() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View>
        <View>
          <WebView
            style={{
              width: 100,
              height: 100,
            }}
            source={{uri: 'https://www.youtube.com/embed/POK_Iw4m3fY'}}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

Somehow, width and height are ignored. However, if we set the width and height to a parent View, it works, at least on Android:

import React from 'react';
import {SafeAreaView, View} from 'react-native';
import WebView from 'react-native-webview';

export default function VisibleWebView() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View>
        <View>
          <View style={{width: 100, height: 100}}>
            <WebView
              source={{uri: 'https://www.youtube.com/embed/POK_Iw4m3fY'}}
            />
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

Can you test this second snippet on iOS and confirm the WebView is now painted?. That could be a track for a fix. What is yet unclear is whether it works because of specific CSS in the embedded youtube page or not? I will have to test more scenarios before providing a fix.

from plugins.

thanks for the quick action. I'll check right now.

from plugins.

Prefect. It works in iOS simulator. For now problem solved :)

from plugins.

@agoudsmit Thanks for your submission! I'm keeping the issue open as there is still a fix to provide!

from plugins.

Hello @jsamr,

I'm facing the same problem of this closed issue and I tried your solution but I got the following error

"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of HTMLIframe."

I'm trying to display the following html

`

                        <h1>The iframe element</h1>
                        
                        <iframe width="100%" height="315"
                            src="https://www.youtube.com/embed/M_xq5YB0z-A">
                        </iframe>
                        
                        </body>
                        </html>`

the iframe tag is not displayed.

My environment is:
"@native-html/iframe-plugin": "^2.6.1",
"react-native-webview": "^11.26.1",
"react-native-render-html": "^6.3.4",
RN 0.69.6

My imports:

import {
  iframeModel,
  HTMLIframe,
  useHtmlIframeProps,
} from "@native-html/iframe-plugin";

import RenderHtml, {
  HTMLContentModel,
  defaultHTMLElementModels,
} from "react-native-render-html";

import { WebView } from "react-native-webview";

my functions:

const IframeRenderer = function IframeRenderer(props) {
  const iframeProps = useHtmlIframeProps(props);
  const {width, height} = StyleSheet.flatten(iframeProps.style);
  return (
    <View style={{width, height}}>
      <HTMLIframe {...iframeProps} />
    </View>
  );
};

const renderers = {
  iframe: IframeRenderer,
};

const customHTMLElementModels = {
  img: defaultHTMLElementModels.img.extend({
    contentModel: HTMLContentModel.mixed,
  }),
  iframe: iframeModel,
};

My component:

<RenderHtml
                      renderers={renderers}
                      contentWidth={width}
                      WebView={{ WebView }}
                      source={{
                        html: `<!DOCTYPE html>
                            <html>
                            <body>
                            
                            <h1>The iframe element</h1>
                            
                            <iframe width="100%" height="315"
                                src="https://www.youtube.com/embed/M_xq5YB0z-A">
                            </iframe>
                            
                            </body>
                            </html>`,
                      }}
                      customHTMLElementModels={customHTMLElementModels}
                    />

from plugins.