rendring html string with iframe in react native, iframe will not be displayed

Question

I'm facing the same problem of this closed issue. I'm trying to display the following html inside a react-native-paper List.Accordion element in my expo application using the iframe-plugin for the react-native-render-html library to render iframe inside 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>

the h1 tag is displayed just fine but the iframe tag is not displayed.

So I searched for a solution and found the solution under issue #41 and I tried it. It basically says that I have to create Iframe renderer manually using the following function

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

However, when I ran the application it crashed and 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.

When I searched for the error on Google, it said that it is an import problem so I don't know what to do about it. So if you know what could be the problem or how to get the iframe to render, I would highly appreciate it.

my code:

import React, { useEffect, useState } from "react";
import {
  View,
  SafeAreaView,
  ScrollView,
  useWindowDimensions,
} from "react-native";
import {
  List,
} from "react-native-paper";
import {
  iframeModel,
  HTMLIframe,
  useHtmlIframeProps,
} from "@native-html/iframe-plugin";

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

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

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,
};

const NotificationPage = (props) => {

  const { width } = useWindowDimensions();

return (<SafeAreaView style={{ flex: 1 }}>
        <ScrollView style={{ flex: 1 }}>
              <List.Accordion
                            title="Content Body"
                            titleStyle={{
                              textAlign: "center",
                            }}
                            style={{ marginTop: "5%" }}
                          >
                         <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}/>
             </List.Accordion>

        </ScrollView>
      </SafeAreaView>
)
}

export default NotificationPage;

Expo CLI 3.20.3 environment info: ``` System: OS: Windows 10 10.0.19044 Binaries: Node: 16.18.0 - C:\Program Files\nodejs\node.EXE npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5791312 npmPackages: expo: ~46.0.16 => 46.0.20 react: 18.0.0 => 18.0.0 react-dom: 18.0.0 => 18.0.0 react-native: 0.69.6 => 0.69.6 react-native-web: ~0.18.7 => 0.18.10 react-navigation: ^4.4.4 => 4.4.4

Libraries

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

rendring html string with iframe in react native, iframe will not be displayed

0 Answers0