Embed YouTube Video in React Native Android Using WebView Component

In this tutorial we are going to explain how to integrate or embed Youtube videos in react native application with the help of Webview component. Youtube API has provide free facility to integrate videos in desktop and mobile based application with the help of simple embed link. Now question is how user can generate embed link for any specific Youtube video link?

Lets follow the below steps that helps you to create embed links :

1. First open any youtube video link for that you want to create embed link. For example : here we have opened below page in youtube.
Link :  https://www.youtube.com/watch?v=0iayQ1xPsnc

2. Now you need to replace the watch?v=  with embed text.

Actual Link : https://www.youtube.com/watch?v=dFKhWe2bBkM

Embed Link  : https://www.youtube.com/embed/dFKhWe2bBkM  ( NOTE : This Link is required inside the WebView Component. )

Embed youtube video in Webview of React Native

Lets follow the below steps to embed youtube video in React Native with the help of webview.

Step-1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-3: Through react , react-native  packages import all required components.

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

Step-4 : Implement render  method and return WebView component wrapped by root View  component. Specify the below parameters in WebView component as props, that helps to display Youtube video.

javaScriptEnabled : Set javaScriptEnabled value as true.
domStorageEnabled : Set domStorageEnabled value as true.
source : Pass the youtube embed link over here.

render() {
    return (
      <View style={{ height: 240 }}>
        <WebView
          javaScriptEnabled={true}
          domStorageEnabled={true}
          source={{ uri: "https://www.youtube.com/embed/0iayQ1xPsnc" }}

        />
      </View>
    );
  }

Complete Source Code for App.js 

Lets see the complete source code that helps to embed youtube video in React Native with the help of webview.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class HomeActivity extends Component {

  render() {
    return (
      <View style={{ height: 240 }}>
        <WebView
          javaScriptEnabled={true}
          domStorageEnabled={true}
          source={{ uri: "https://www.youtube.com/embed/0iayQ1xPsnc" }}

        />
      </View>
    );
  }
}

Screenshot : 

This is all about integrating youtube video in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.