How to Embed Youtube Video in React Native Webview

Last Updated on December 12, 2020.

In this blog post, I will show you how to embed a YouTube Video in your react native app using webview. As you may know, the Webview component will be removed from the react native core. But you can use the Webview component from react native community.

First of all, install react native webview using the following command:
npm install –save react-native-webview
If you need more on installing react-native-webview then click here.

Before getting into the code you need to get the YouTube link of your video. In this project, I am using a random YouTube link of Freecodecamp which is https://www.youtube.com/watch?v=Sz7SImkdIpo. You have to replace ‘v’ in the youtube URL with ‘embed‘, then only you can properly embed the Youtube video using the webview. Now the Youtube link looks like https://www.youtube.com/embed/Sz7SImkdIpo

Open your app.js file and replace the existing code with the following code.

Class based component

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from "react-native-webview";

export default class App extends Component {
render() {
  return (
    <View style={styles.Container}>
      <WebView
        style={ styles.WebViewStyle }
        source={{ uri: 'https://www.youtube.com/embed/mXRfApkMYZU' }}
        javaScriptEnabled={true}
        domStorageEnabled={true}   
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1
  },
  WebViewStyle: {
    margin: 20
  }
});import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import {WebView} from 'react-native-webview';

export default class App extends Component {
  render() {
    return (
      <View style={styles.Container}>
        <WebView
          style={styles.WebViewStyle}
          source={{uri: 'https://www.youtube.com/embed/Sz7SImkdIpo'}}
          javaScriptEnabled={true}
          domStorageEnabled={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
  },
  WebViewStyle: {
    margin: 20,
  },
});
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { WebView } from "react-native-webview";

export default class App extends Component {
render() {
  return (
    <View style={styles.Container}>
      <WebView
        style={ styles.WebViewStyle }
        source={{ uri: 'https://www.youtube.com/embed/mXRfApkMYZU' }}
        javaScriptEnabled={true}
        domStorageEnabled={true}   
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1
  },
  WebViewStyle: {
    margin: 20
  }
});

Function based component

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {WebView} from 'react-native-webview';

const App = () => {
  return (
    <View style={styles.Container}>
      <WebView
        style={styles.WebViewStyle}
        source={{uri: 'https://www.youtube.com/embed/Sz7SImkdIpo'}}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  Container: {
    flex: 1,
  },
  WebViewStyle: {
    margin: 20,
  },
});

export default App;

That’s it, now just run the project and you can see the youtube video inside the app- as shown in the screenshots below.

The source code of this react native example is available as Github Repository.

1 thought on “How to Embed Youtube Video in React Native Webview”

  1. Pingback: How to Add Youtube Video in Your React Native App - REACT NATIVE FOR YOU

Leave a Reply

%d bloggers like this: