Oath
I swear that I have completed these tasks before submitting:
- [ x] I have read the README
- [ x] I have checked that the issue has not been reported yet
- [ x] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin
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
- Device 1
- OS: iOS 16.3.1
- Diagnostic: negative
- Environment: development
Reproduction
Description
I'm trying to display the following html inside a react-native-paper List element
<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. 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
importReact,{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";importRenderHtml,{HTMLContentModel,defaultHTMLElementModels,}from"react-native-render-html";import{WebView}from"react-native-webview";constIframeRenderer=functionIframeRenderer(props){constiframeProps=useHtmlIframeProps(props);const{width, height}=StyleSheet.flatten(iframeProps.style);return(<Viewstyle={{width, height}}><HTMLIframe{...iframeProps}/></View>);};constrenderers={iframe: IframeRenderer,};constcustomHTMLElementModels={img: defaultHTMLElementModels.img.extend({contentModel: HTMLContentModel.mixed,}),iframe: iframeModel,};constNotificationPage=(props)=>{const{ width }=useWindowDimensions();return(<SafeAreaViewstyle={{flex: 1}}><ScrollViewstyle={{flex: 1}}><List.Accordiontitle="Content Body"titleStyle={{textAlign: "center",}}style={{marginTop: "5%"}}><RenderHtmlrenderers={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>)}exportdefaultNotificationPage;
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
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
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