Full Stack Youtube Clone using React Native — Part 1

Part 1: In this tutorial, we will be working on the navigation work, and here will our real project will start

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(In progress)
• 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)

Hallo guys, So let's now get started with the project, and let’s do some real work 💪💪. If you wanna know about this project and its features, check the Part-0 article. Again I am not gonna go into basics so, this tutorial assumes that you have some basic knowledge about react-native. So, with all that let's get started.

Getting Started

Of course, we will be needing node js which can be installed Here. I personally prefer using Visual Studio Code but you can use any IDE of your choice. Ok, now let’s install all the modules that we will be using.

React Navigation + Modules Installation

First, let’s start quickly start with that app with Expo. I will be using ‘Expo CLI’ but it's completely your choice to use whatever you want. Generally, when you get experienced with Expo, you move on to ‘React Native CLI’.

So let’s get started and install expo-cli first

npm install -g expo-cli

And run the following command to create a new React Native project called ‘YoutubeClone’ and run your development server

expo init YoutubeClone # I chose blank template
cd YoutubeClone
npm start # you can also use: expo start

Btw, I have basically copied this expo installation process from the docs, so please refer to the docs in case of any doubt.

So, let us now install some modules.

• React navigation

As the name suggests react-navigation is used for routing and navigation in native apps. It comes up with various features like ‘createDrawerNavigator’(used for creating side drawers), ‘createStackNavigator’(screens piled up in a stack and follows a hierarchy concept that will be explained later), and ‘Tab Navigators’(Tabs) which makes our life a lot easier. In case of doubt, you can refer to the navigation docs here. So, now let’s install it.

Installation

npm install react-navigation

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don’t worry too much about this for now, it’ll become clear soon enough! To frontload the installation work, let’s also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.

The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context.

The upper part is quite clear and so let’s install these core utilities.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

All these things are from the docs and I am not explaining these things much because I assume you know all these things. It's just for a refresher.

—

• Stack Navigator

Stack Navigation is the most basic and common form of navigation in any app — web or mobile. How this works is that its screens are managed on a stack. When you open a screen, that screen will be pushed to the top of the stack. It pops or pushes the screen as you open or leave the screen and only the screen on the top is visible. So, it's simple and let's install it now

npm install --save react-navigation-stack

• TabNavigator

As the name suggests ‘Tab’ Navigator, it used for navigating to different screens with the help of tabs. Either we can place tabs on the top or the bottom, but we will go with the bottom only in this project. Now let’s install it.

npm install — save react-navigation-tabs

• AppLoading

When we open youtube or any other app, we see an opening screen or splash screen. So, Apploading helps us to show the splash screen when the app starts to load all the necessary fonts, logos, images, or any other assets. Now it's turn for the installation.

expo install expo-app-loading

• React-navigation-header-buttons

As the name suggests it is used for rendering buttons in our navigation bar. If you simply render an element without using this package you will observe many styling and alignment issues and even if we correct that, it might not work on other device sizes. So, we will be using this package to add buttons to our navigation header.

This package will help you render buttons in the navigation bar and handle the styling so you don’t have to. It tries to mimic the appearance of native navbar buttons and attempts to offer simple and flexible interface for you to interact with.

The above statement is quite self-explanatory So, let’s install it now

npm install --save react-navigation-header-buttons@6

umm, I think that's all we need now for the navigation! So, why not start using these modules now. After Installing all these, your App.js might be looking somewhat like this.

First, before getting into navigation let’s import some fonts into our application using AppLoading.

Adding fonts

So, modify the App.js like this

The code is quite self-explanatory. If you don't know know what AppLoading is, see the React Navigation and its different Navigators Installation section. You can Install the above fonts from here. And by the way, the keys you pass in FontloadAsync will be used as the font name. Still, if any doubt, see here to clarify.

Now, let's start adding Navigation to our project but before that, we need some screens to which we can navigate. don't we? So, Let's add some dummy screens for now.

Adding Some Dummy Screens

So, in your project's root(main) directory, create a folder called ‘screens’ and create the following files in it.

1. Error.js
2. Home.js
3. library.js
4. Search.js
5. Shorts.js
6. Subscriptions.js
7. MediaPlayer.js

These are all the screens of the project. And for now, lets add just a text on each screen with their name like this.

Similarly, add this to all these screens. Now, with that setup let’s get on to actual navigation work. So let’s create a stack navigator and bottom tab navigator and then we will do the styling.

Adding Stack and Tab navigator

So first, let’s create a new folder in your root directory and call it ‘navigation’ and inside create a file called YoutubeNavigation.js. Of course, the file name is totally up to you. So, first, let’s only create a stack navigator, then we will combine our Tab Navigator to the stack Navigator

Only Using Stack Navigator

So, add the following code YoutubeNavigation.jsfile. The explanation for the code is in the comments only and the long explanation is below the code.

There can be multiple stacks based on our requirements and we only needed these 4 screens for the stack. We only need those screens in a stack that are connected together and we move through them and we didn’t use the rest of the screens i.e ‘Library’, ‘Subscriptions’, ‘Shorts’ etc because they will be used in the tab navigator.

Now to see the results, edit the App.js as following.

Now, if you run the app you will also be able to see a header which is provided us by the stack navigator. But if you notice the header simply has the name ‘Home’ on it. So, first, let’s also add TabNavigators and then will design the header.

Add TabNavigator and Combining it with Stack Navigator

This will be our whole YoutubeNavigation.js file with both these navigators combined.

The explanation is in the comments only so see the comments carefully. So, now we have the stack navigator and tab navigator ready and combined. If you run now, you will be able to see bottom tabs too with icons. Now, let’s remove that only name header from our screen and instead make a header like YouTube.

Adding Styling to our Header

So just like the ‘navigationOptions’ for the TabNavigator, we can add navigationOptions for the StackNavigator as well. I will be adding these ‘navigationOptions’ in the specific screens but you can try ‘defaultNavigationOptions’ and all and try it. We can add navigationOption in a screen in this format. Suppose this is one of our screens

const A_Screen = (props) => {
.......
........
.........
return (
....
)
}
A_Screen.navigationOptions = ()=>{
{Our navigationOptions}
}

Now why do we do A_Screen.navigationOptions = bla bla. A_Screenis a component we use in different screens etc but here if we are getting props and doing an arrow function, it simply means that it's a function, and this function returns some JSX which we use. And you remember the first time you learned js, you would remember that a js function is a ‘functional object’. I found a youtube video that explains this very well. So, we can add properties to an object, right? So, we added a navigationOptions property to it. And here we can add the properties

I didn’t want my file to be too big as there was a lot of option that I added. So, I created a new file, added the options there as an object, and then imported it here. But, you can add these properties here. So, if you wanna go by this method, create a ‘constants’ folder and add a file called ‘NavigationOptions.js’ in it. Like this:

And add this to it.

As mentioned above, we used a package called react-navigation-header-buttons to add buttons to our header. So, we imported a package called HeaderButtons which is a wrapper around all the visible header buttons(HeaderButton). It receives a prop called ‘HeaderButtonComponent’ which renders the HeaderButton component and tells the IconCompnent, IconSize, IconColor, and all. So, in order to reuse code, we made a component called HeaderButton.js in our components folder(in the root directory). So, create a ‘Component’ folder and create a file calledHeaderButton.js and the following code to it.

All the above 2 code snippets might be very unclear for you. But all this is given along with a very good explanation in ‘react-navigation-header-buttons’ docs. So, please refer to the docs and read the explanation there very carefully.

Now we just need to edit our home screen a bit in order to see the header. So, let’s edit our Home.js a little bit.

And finally, we are done!!!!. If you now run your app you should see a good header just like YouTube and a tab at the bottom. So, I think we are ready for the next part which will be there in no time and we will now work the search screen along with the API in the next part.

Till then stay safe, stay healthy

Thank you