search

native-html / plugins

Plugins for react-native-render-html
MIT License
55 stars 18 forks source link

[iframe-plugin] html string with iframe, iframe will not work. Tried the solution in issue #41 but the app crashes #46

Open YoussefElattarr opened 1 year ago

YoussefElattarr commented 1 year ago

Oath

I swear that I have completed these tasks before submitting:

Bug Report 

I'm facing the same problem of this closed issue. 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."

Environment

React Native
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

Devices

Reproduction

Description

I'm trying to display the following html inside a react-native-paper List element

<!DOCTYPE html>

The iframe element

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. 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.

Reproducible Demo

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;