Hello I am working on an app for a school project using React Native and have been having trouble getting iframes to work. The code that I have been working on is below.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
DeviceEventEmitter,
StatusBar,
DrawerNavigator,
Button,
WebView,
} from 'react-native';
import Iframe from 'react-iframe'
var s = require('./style');
const VideoPage = (props) => {
const { navigate } = props.navigation;
return (
<View>
<View style={s.container}>
<StatusBar
backgroundColor="black"
barStyle="light-content"
/>
</View>
<View>
<Text style={s.headText}>
Welcome the video tutorial page!
</Text>
<Button
onPress={() => navigate('Home')}
title="Go to Home"
/>
</View>
<Iframe url="http://www.youtube.com/embed/xDMP3i36naA"
width="450px"
height="450px"
id="myId"
className="myClassname"
display="initial"
position="relative"
allowFullScreen/>
</View>
);
}
VideoPage.navigationOptions = {
title: 'Video Tutorials',
};
export default VideoPage`
When I compile this on my virtual device it builds, however when I attempt to access the VideoPage I get the following error:
Invariant Violation: View config not found for name iframe
If anyone could take a look and let me know what I am doing wrong I would greatly appreciate it. Please let me know if you need more information.
So as shown in the example above, your iFrame is loaded inside the WebView component. You can then render any web page or URL inside your iFrame then. That's it for today.
import React from "react"; import ReactDOM from "react-dom"; function App() { return ( <div className="App"> <h1>Iframe Demo</h1> <Iframe iframe={iframe} />, </div> ); } const rootElement = document. getElementById("root"); ReactDOM. render(<App />, rootElement);
react-iframe is not an react native component.
You should use WebView instead.
https://www.quora.com/How-do-I-integrate-iframes-in-React-Native-platform
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With