React Native YouTube Replica

Let’s Build YouTube

(Courtesy of hello-i-m-nik via Unsplash)

When choosing this project I had a few goals in mind.

(1) Learn to use the YouTube API with React Native.

(2) Learn and implement React Navigation.

(3) Solidify my understanding of Xcode and the iOS simulator (Android will get some love too).

(4) Work on my UI skills

(5) Write a clear, concise walkthrough on my findings to cement my understanding of these concepts.

If these goals sound to your liking, I invite you to learn alongside me.

Let’s get to work!

Setup

For mac users the first thing we should do is download Xcode from the app store and setup the iOS simulator and/or Android emulator. This short and sweet article does a great job of going over these intricacies for both iOS and Android. For Windows users this article will provide you with clear, concise instructions.

Next we’ll need to get our API authentication key from YouTube. Head to https://developers.google.com/youtube/v3/getting-started or just watch this very short video by the Google developers.

For this app we only need Simple API access.

Let’s finish our setup by installing Yarn. Yarn is a JavaScript package manager created by Facebook that’s much like npm. It can install packages from the npm registry and more. Yarn can do just about anything npm can do — only faster.

Mac users that followed the article above to install Xcode should already have Homebrew. If you already had Xcode and didn’t need the article above, and do not have Homebrew, just copy and paste the code below into your terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Equipped with Homebrew, type this command into your terminal to install yarn:

brew install yarn

For Windows users, simply click on this blue Download Installer button.

We’re going to need to create a project, start our iOS or Android environment, and install a few dependencies. In your terminal type this command to install react-native globally:

npm install -g react-native-cli

This next command will create our project and name it. Let’s call it YouTube.

react-native init YouTube

The last two commands are to cd into our project folder and open up either the iOS simulator or Android emulator.

cd YouTube

Generally for iOS I like to use the iPhone X simulator. We can choose which simulator we want to run using a little specificity at the end of the vanilla command like so:

react-native run-ios --simulator='iPhone X'

For Android just type:

react-native run-android

Sweet! We’re making progress. Now that our environments are set up, let’s install our dependencies. As I stated, we’re going to be using react-navigation to ‘switch’ from the home screen to a new screen when playing a video. We’re also going to need to import and link react-native-youtube and react-native-vector-icons. We’ll discuss these in length as we implement them, but for now let’s just get them installed. Type the following four commands into your terminal:

(1) yarn add react-native-youtube
(2) yarn add react-native-vector-icons
(3) yarn add react-navigation
(4) react-native link 

As a side note, if later you have problems linking react-native-vector-icons, take a look at this explanation on adding this dependency to Xcode manually.

React Native

With that pesky setup behind us, let’s get to the code. Open up your editor of choice. Inside of App.js should be the following code:

Let’s start with our imports and a little spring cleaning. Adjust App.js such that it looks like the following:

Once you save App.js our app should just say “Still working!.” You’ll notice we imported some react-native components, the dependencies from earlier, and a file named YouTubeVideo. This file doesn’t exist yet but not to worry, we’ll get to that in a moment. For now, let’s continue in App.js.

Earlier we got our YouTube authentication key. Now we get our chance to use it. Replace YOUR KEY GOES HERE with your API key and take a look at the URL YouTube provides us with.

https://www.googleapis.com/youtube/v3/search/?key=YOUR KEY GOES HERE&channelId=UCQzdMyuz0Lf4zo4uGcEujFw&part=snippet,id&order=date&maxResults=30

Let’s take this step by step. We’ll take interest in three pieces of this URL. The first:

key=YOUR KEY GOES HERE

next:

channelId=Im the Game of Thrones Channel ID

lastly:

maxResults=The number of videos we wish to render

You might have noticed we skipped some of the URL just before maxResults. This piece tells YouTube what data to give us.

part=snippet, id&order=date

Add your authentication key to the URL like in the example above and paste it in the browser so we can get a look at how YouTube’s data is structured.

Here we have an array named ‘items’. Inside of items we have an Object named ‘id’ which contains the ‘videoId’, and an Object named ‘snippet’ which contains the ‘channelId’ and the ‘title.’ Now we know what’s going on inside of our URL. We also know how to reference the data we wish to extract. Let’s get back to App.js. Under the imports adjust App.js as shown below.

Here I separated the URL data into variables making it easier to make changes. Next we create an empty array named data. After our constructor function we use the react-native componentDidMount method. Inside we fetch our JSON from YouTube. In the example above I inserted the URL into the fetch method using a template literal.

Inside the fetch promise we create an empty array and call it videoId. We then implement a forEach method that loops through the ‘items’ array, grabs the data we ask for, and pushes it to the videoId array. We then set the contents of data to be videoId.

Now that we have our data lets adjust our render function.

There’s a lot here so let’s take it step by step. I left the commented out onPress method inside the render function to show you the react-navigation syntax for navigating to another screen. I used destructuring to place this.props.navigation in the const named navigate.

We create a View container and insert a ScrollView component. We then create another View component. This is our body. Inside we implement a map function that’ll iterate through our data.

Now we use the TouchableHighlight component to contain each video and make them responsive. We use the videoId as the key and with the help of react-navigation, we send the video display to the next screen(we’ll come back to this).

Inside a new View, we insert the thumbnail Image, and the title via the Text component. In this view are two items that do not come from YouTube. One is an icon from the dependency we imported earlier called react-native-vector-icons. The last item in this View is an image I downloaded from google. Its an image of the NightKing and is what is being used by the Game of Thrones YouTube Channel. If you search google for ‘Game of Thrones season 7 pics’ this’ll be one of the first pics to show up.

Download the image. Back in your project directory create a new folder named images. Drag the downloaded picture above into the new images folder.

Now to style our app:

Under our StyleSheet component add the code below.

Here we create and export screens and assign our two route names to their Components. You can name your route anything you’d like. Our first route name is the ‘Home’ screen that lies in the in App Component. Our second route we’ve named ‘YouTubeVideo’ which we’ll soon describe in YouTubeVideo.js. The cool thing about react-navigation’s StackNavigator is that it provides us with a back arrow for navigating to our home screen from our YouTubeVideo screen.

Now let’s take another look at our onPress method inside the App.js render function.

onPress={() => this.props.navigation.navigate('YoutubeVideo', {youtubeId: item.id.videoId})}>

Here we use the react-navigation syntax for navigating to another screen and pass it a routeName and the params. Let’s take a look at the docs.

Since we’re exporting screens, we will now have to adjust the App Component such that it no longer exports. It should now look like this:

class App extends Component {

In order for our YouTube videos to play, we have to go into Xcode and add the iframe-player to our project. If you’re using the Android emulator this obviously isn’t necessary. We’ll take this step by step. Terminate your terminal and exit out of the iOS simulator. We’ll start it back up once we add the necessary files.

To start our project again we can either press the play button in Xcode or cd into our project directory and type into the terminal the command from earlier:

react-native run-ios --simulator='iPhone X'

Now all we need to do is set up the YouTubeVideo component. In your project directory create a file named YouTubeVideo.js. Inside were going to utilize a YouTube component courtesy of the YouTube Github page. Click on that link and scroll down until you see the code below.

We’re going to copy and paste this code into our YouTubeVideo.js file. Adjust YouTubeVideo.js such that it looks like the example below.

First we handle our imports. Then we add a static method that courtesy of react-navigation will give us a header for our YouTubeVideo screen, and style it. Next we simply copy and paste the code from the YouTube API into our render function, add our apiKey, wrap it in a View, and style it.

Once you save your project our app should be functional and look like this:

Here you can see the thumbnail and title coming from the YouTube API. You’ll also notice the image we downloaded earlier to the left of the title, and the ‘more-vert’ icon we imported via react-native-vector-icons on the right. If you’d like to see where these icons come from and how I’m referencing them, check out the react-native-vector-icons directory here and take a look at the gif below.

Now that the body of our YouTube replica is looking the way we want, let’s focus on the header. We’ll again use react-navigation to do this.

Before we get to the code we need to download and import one last image. This is the YouTube logo, which will reside in our header. Head to google and search ‘youtube logo png.’ This will provide you with an image much like the one below.

Download this image and drag it into your ‘images’ folder. Now that we have the necessary requirements let’s get to the code. Just below our URL variables, inside our App component, and before our constructor method, insert the following code:

Here we implement a static method that creates our header. Inside of headerStyle, we set our background color to white. Next we use react-navigation’s headerLeft to insert our logo and style it. Finally, we use headerRight to insert four icons and style them. You’ll notice I wrapped all of these items in react-native’s TouchableOpacity component. This will change the opacity when they’re pressed lending some responsiveness.

If this were a full-blown YouTube replica consisting of several screens, we’d use TouchableHighlight and it’s ‘overlayColor’ prop to highlight in red which screen is currently in view, mimicking the YouTube functionality. In attempt to keep this post short and concise as possible, I’ve limited this to two screens, and in doing so, felt TouchableOpacity would be a justifiable substitution.

Awesome! We now have our header and body. But our app wouldn’t be complete without a tabBar. As I stated in the beginning of this post, I wanted to not only learn react-navigation, but also work on my UI skills(which are severely lacking.) For this reason, I thought it might be educational for myself and any would be reader, if I were to implement the tabBar without the help of react-navigation. The fact that the items in the tabBar won’t render their own screens made this an understandable approach as well.

Onward! Inside of our render function, just below the ScrollView component, but inside the outermost View component, insert the following code:

Here we create a View to contain our tabBar styling. Inside of this View we import five icons from react-native-vector-icons, add some Text to label the icons accordingly, wrap the icon and its Text in a TouchableOpacity component, and style them. Speaking of styling, let’s finish handling that. Inside of StyleSheet insert the following code to complete the styling of our tabBar.

Once you save your App.js file our app will be complete. App.js should resemble the following:

Apologies for the sound quality. It’s downright awful! Consult your nearest ear doctor before venturing into the ahead debauchery. That said, I’m no YouTuber, and I’m just using my internal speakers for the video below. A man should tread carefully. For the spoilers are dark and full of terrors.

BEHOLD!!!! We did it! We’ve replicated YouTube! Now go forth and create!

If you’re interested in learning more about react-navigation check out the video below. In it the creators of react-navigation give a lecture at Harvard University, and do a much better job than I ever could at explaining its use cases.

Reach out on DEV and Twitter. You can check out this project at my GitHub and other cool things I’m learning at my Codepen.