How to Embed Youtube Video in React Native Webview

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 is 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.

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.

That’s how you embed YouTube video in react native using WebView.