27.12.2019

YouTube is the number one video platform in the whole world. Not only streaming, but it also allows the users to rate, like, dislike or comment on videos of your choice.

Since its launch, YouTube has been one of the biggest video platforms in the whole world. Not only streaming, but YouTube also allows the users to rate, like, dislike or comment on the videos of your choice.

Globally, YouTube is recognized for video blogging, movies, education, entertainment and a lot more.

With the YouTube API, users can find and manage the content throughout YouTube. The API also allows a user to add the YouTube integration into their website or mobile apps.

While your business is being developed and worked upon over a website or an app, you might want to add certain media functionalities in it as well. For this purpose, you can integrate media from YouTube into your mobile apps, which we would be discussing in this blog post.




In this blog, you will Read -

  • Make a React Native App

  • Installation of Dependency

  • How to Obtain your YouTube API key

  • Embed a YouTube video in Webview of React Native 

  • Coding the YouTube Player

  • Building the components of your app

  • Build your very own YouTube integrated app 


Make a React Native App

React Native is the main framework for the development of a variety of apps. Get

ting started with this framework is going to help you in making a React Native project. 

In this case, we would be using react-native init. If the node is already installed, just use the npm for installing the react-native-cli command line utility. Head over to the workspace in your terminal and run -

npm install -g react-native-cli

Now run the following commands to create a new React project -

React-native init

This command is going to make a project structure with an index file namely App.js which you can find in the project directory.


Installation of Dependency

For the YouTube integration with React Native, we have to install the react-native-youtube package.

Open your project in the terminal window

cd Project Name


Now, run the following command

npm install react-native-youtube --save


With the help of this command, the dependencies are going to be copied into your node_module directory.


How to Obtain your YouTube API key

As we are moving forward with the integration of YouTube into your application, we need to get the YouTube API key from the Google Developer console. 

For obtaining the API key, log in to your Google account and open the Developer console.

In case you have already been working on an existing project, you can use that. And if not, just create a new one.

Soon after you have created the project, you can see a drop-down menu in the top left corner of the window. Select the project and move to the credential section where you would be able to find the ‘create credential’ option.


Click on the credential button which would automatically create an API key for you in the YouTube application.

Right before you begin with the process of adding this API key into your project, make sure you enable the API Library/ feature. This is the most important step for acquiring the key.

In the search button, just search for YouTube and you are going to find the YouTube related API library and make sure to enable YouTube Data API.

Click on the YouTube Data API and you will see an enable button which gives you the YouTube Data API.

Soon after you enable the API key, add the same into your project’s App.js file. Whatever API key you can find throughout the App.js file, replace that with your generated API key.

Your App.js would usually contain YOUR_API_KEY by default. Make sure to replace that.


Embed a YouTube video in Webview of React Native

For embedding a YouTube video in the React Native development, you can take the help of Webview.

Step 1: First of all, create a new React Native project.

Step 2: Now, open the index.android.js/index.ios.js in the preferable code editor and erase all the code present there.

Step 3: Through React, import all the required components

import React, {Component} from “react”;

Import {Platform, StyleSheet, View, WebView} from “react-native”;

Step 4: Use the render method and return the WebView component. Specify the following parameters to display the YouTube video -

javaScriptEnabled - Keep the javaScriptEnabled value as true

domStorageEnabled - Keep domStorageEnabled value as true

Source - Paste the youtube embed link here.


Coding the YouTube Player

The primary step is to add the API key in the .env file. 

Even though dotenv package from npm would do the job, but it comes pre-installed with the create-react-app.

It leaves us with a special way of adding an environment variable in the create-react-app. You need to prefix your environment variable with REACT_APP_ or it won’t work for you.

While you are working on localhost, you would be needing the .env.development file. For the purpose of the production build, you can use the .env file.

You can make these two files in the root directory of the project and add the following variables -

REACT_APP_API_KEY=


Building the components of your app

As App is the root component, you would need 4 more components i.e. SearchBar, Video Detail, Video List and VideoListItem.

You can now make a directory name ‘Components’ in the SRC directory of your project and manually build every component of the app.




  1. SearchBar Component

Starting with the SearchBar component, all you need is an input to search which could wire with onChange event handler for mutating the keyword and providing you with a result of the search entry.

It is similar to that of searching for a video in the YouTube app or website.


  1. Acquiring data with axios library

Here, axios library could also be used to fetch the data from API which makes a network request to YouTube API. This fetches a list of videos which are related to the search term a user makes.

The whole purpose of this part is to provide the user with relevant results for his keyword. The snipper sends a summary of the entire video which provides info such a video title, description etc.

maxResults indicated the number of results which are needed from the search.


  1. VideoList Component

This is a functional component which is going to provide you with the list of videos from the App component. It is derived from the VideoItem Component.

Inside this component, the details about the selected video are returned to the user.


Build your very own YouTube integrated App

Since you are trying to build a YouTube integrated app for your business, you might need some help along the way. Even though this process is a simple one, but a single error might lead to disruptions all over.

In such cases, you can even ask or hire the react native developers for assistance in native app development.

The are a lot of platforms who can offer you with some of the best solutions for mobile app development. You can get hands on the integrated IT solutions get the best service over various web development projects. The services of companies who offer react native developers and services, span across websites, mobile development, software, testing api, consulting, and Business Analytics integration. 


CONCLUSION

So this was the whole procedure of creating a YouTube-integrated application with the help of React Native. This method is very handy in case you want your app users to play any YouTube video without having to visit the site out of your app. It will keep the users in your app only which is a major engaging element app designers are looking for.

YouTube Android Library has a great API which allows the users to customize the different elements of inclusion of YouTube player into their app.

So if you are planning to develop a YouTube integrated application with the help of React Native, you know how and where to start. You can now add any educational or Entertainment videos from YouTube into your app for reference or other purposes with React Native.


Author Bio:


Kristy Davis is a Marketing Manager at i-Verve inc, an innovative React Native Development Company for web and mobile platforms. She is responsible for communication, marketing and business development of the company. Apart from the responsibility of strategic business development, she looks after branding, media relations, and advertising. Kristy also directs and manages sponsorships, marketing training, and events in the company. She has been involved in various high profile roles in the marketing industry. When she is not making any magic at her desk, you’re likely to find her exploring nature, eating her way through Lakeview, and Wrigleyville’s finest cuisine and its surrounding suburbs or taking a drive along the Western Avenue. Her camera rarely leaves her side. In case you don’t know where to get started or face difficulties in integrating YouTube videos into your app, you can hire react native developers who can get this job done for you.




5 Necessary Tools Small Businesses Need For More Growth and Efficiency
With the current global situation causing economic downturns, small...
Photoplethysmography Is Improving Thanks to AI
Photoplethysmography (PPG) is an optical technique used to detect changes...

Leave a Comment

comments powered by Disqus