Full Stack Youtube Clone using React Native — Part 3

Working on the Screen that will play videos and also showing the comments

Note:

Following are the different parts of this project in order:

• Part 0 — Intro to the article
• Part 1 — Doing the navigation work for the project and creating the Headers and Tabs(Bottom)
• Part 2 — Working on the Search Screen (Header and the content)
• Part 3 — Working on the Screen that will play videos and also showing the comments
• Part 4 — Creating the Home Screen, adding redux
• Part 5 — Doing some styling changes, checking for errors, and explaining how to build apps without expo and how you can expand this project(In progress)

So, if you have 👀 the above note and are following the tutorial we can move on to this tutorial. In the last part, we made our search screen, where users can search video but now let’s give users the facility to click on the ‘search video’ and see the video and the comments. Also, we will be using all the concepts that we did in Part 2, So check it out in case you have any doubts because the explanation of the before parts are not written.

So, before writing the code let’s install the modules we are going to use. We are only going to use 1 module i.e for Playing the youtube video. So, let's install it without any further delay.

Modules Installation

• React Native Youtube iframe

Here is some info about this module on the docs

A wrapper of the Youtube IFrame player API build for react native.

✅ Works seamlessly on both ios and android platforms

✅ Does not rely on the native youtube service on android (prevents unexpected crashes, works on phones without the youtube app)

✅ Uses the webview player which is known to be more stable compared to the native youtube app

✅ Access to a vast API provided through the iframe youtube API

✅ Supports multiple youtube player instances in a single page

✅ Fetch basic video metadata without API keys (uses oEmbed)

✅ Works on modals and overlay components

✅ Expo support

In simple words, it used to display youtube videos with above the following features. So, let’s install it but before that, we need to install react-native-webview because react-native-youtube-iframe uses this library to work.

So let’s first install react-native-webview

npm i react-native-webview

And now let’s install react-native-youtube-iframe

npm i react-native-youtube-iframe

So, I think we can now let’s start coding 👨‍💻👨‍💻

Getting Started

First, we will change our header i.e Remove our header because we will not be requiring our header in our Youtube Player screen. And then we will move on to Playing video and Designing the page and then finally for showing comments.

Your VideoPlayer screen might be looking small and basic like this

So, now let’s make it BIG!!!!!!!!

Tenor

This file will not be big btw (I think it is the smallest file 😌😌)

Removing the Header

Removing the header is very easy. Just change it as following and your header will be gone.

Remove Header

Just see where I have put ** in the above code snippet. So let’s design the page and show our video.

Designing the page and Playing video

Designing the page

First let’s design the page and show some basic data that we are getting from the Search Page. If you remember in the Card.js file we are getting the following params:

Cards.js shot from Part 2

So, we are getting these Videoid, title, channaltitle, date. So let’s display all these(except Videoid) .We also need to display the buttons like:

So, let’s first create a small component that displays a button. For that let’s create a new file called ‘VideoplayerIcon.js’ in our components folder

VideoPlayerIcon.js

And add the following code to ‘VideoplayerIcon.js’ file

Now we can start creating our screen. So add this basic code to our VideoPlayerScreen

So, now let’s display the video and show comments using react-native-youtube-iframe and Youtube API respectively.

Showing YoutubeVideo Player and displaying Comments

First we need to make a component that shows our comments. So, like always let’s make a file ‘Comments.js’ in the components folder

Comments.js

And add the following code to the comments.js file

If you have any doubt about any part of the code, you can check the previous parts as well and of course, you can refer to ‘Google’.

Now, let’s start making our final VideoPlayerScreenThis will be the whole code for our VideoPlayerScreen . All the code is explained in the comments below.

Now I think we are done !! If you now search a video and click on the video you should see video Playing along with comments. All the things we are getting from the API are unlimited scrolling btw.

So, this is for this tutorial and in the next part, we will create our Home screen which will be quite interesting. So, I will meet you all there

Till then stay safe, stay healthy

Thank you