React Native iframe

Question

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.

Answer 1

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