Full Stack Youtube Clone using React Native — Part 2

Part 2: In this part, we will be working on the Search Screen(Header + Using the Youtube API)

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)

In the previous part (Part 1), we did some navigation work and created the default youtube header (header on the Home Screen and other screens) but the header of the search screen will be completely different because there will be TextInput instead and we will also show the related search results. We will also be using the Youtube API to show search results and implementing Unlimited Scrolling concepts.

Now you know now what are we going to do in this part So, let’s start installing the modules we need and get started. We will be requiring only 2 modules here. The second module is an optional module if you want if you don't wanna create a header on your own. I will be using my own component in my actual code but I have provided code for both.

Modules Installation

• date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset
for manipulating JavaScript dates in a browser & Node.js.

Above explanation from the docs is I think tells you why we are gonna use this module. We will be taking this module’s help for converting this types of dates 2017–11–10T18:51:05Z agointo something like 3 Years 9 months ago . Please refer the date fns docs to learn more about this package.

• react-native-search-header (Optional)

Easy to use React Native search header component based on material design patterns.

My main motive to use this module was to get search completions but I was not getting full accessibility so I rather made my component. But it's your choice if you wanna use this module or not. But let’s install it now

npm i react-native-search-header

This whole part will mostly implement what we did in Part 1. So if you have seen it or know the logic it will be a piece of cake for you

By Tenor

So, let’s get 👨‍💻

Getting Started

First, we will create our Search Header and then we will move on to using the Youtube API.

Your Search screen might be looking like it’s a basic page like this till now:

So like explained in Part 1 how we add design and style the header, let’s do the same here

Changing the Header

We will be dealing with some states too while creating the header. So first let’s know what are state hook and what all states we will are going to use for what (Only while dealing with the header for now) and finally, we will start with changing the header

What are States in React Native and how to Change and use them

In react native states are used to store information about the component and update it accordingly. When the component’s state gets changed, the component gets re-rendered along with child components to show the changes. If you are familiar with class-based components you might have done it like:

this.state = {
MyState: value
}

And change state by:

setState({MyState:value});

But we use useState when we want to add state to our functional component. So, this built-in hook can be used to add a state and change it in the functional components without using class-based components. An example to add state is:

const [MyState, SetMyState] = useState(0); // Just destructure array

Here we can use MyState to use the state and change it by:

SetMyState(value)

You might be having some doubts so check some articles to clarify them but now we can know, what all states are we going to use(related to the header).

States that are related to our Header

So, there 4 states states we are going to use that will be handy managing some data.

const [Submitted, setSubmitted] = useState(false); // Wheather user have clicked the search button or not
const [SearchedText, setSearchedText] = useState(""); // What user has Searched
const [Inputstate, setInputstate] = useState(true); // Wheather Input if foccused or not
const [RelatedSearchedArray, setRelatedSearchedArray] = useState([]); // Realated Search List

SetParams and UseParams

You know that we how we style the header by adding navigation Options belew when we define our screen by:

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

But we cant access our states here. You guessed it right! We will be using SetParams which is used to pass our states or update it in to our current screen. So, how can we update our state in the navigationOptions? We will simply pass a function using SetParams which will will change state there. A basic format would be Like this:

const ChangeStateFunc = () => {
setState(value)
}
navigation.setParams({ //       | Ofcourse when state chnages
ChangeStateFun:ChangeStateFun// | or in
}) //                           | in useEffect Fcnction

And How you will get State in navigationOptions. We will use getParam
to get the values. So, let’s complete the above code snippet.

const ChangeStateFunc = () => {
setState(value)
}
navigation.setParams({ //       | Ofcourse when state chnages
ChangeStateFun:ChangeStateFun// | or in
}) //                           | in useEffect Fcnction
// Assume In the navigationOptions ⬇️⬇️
navData.navigation.getParam("ChangeStateFun") // Got the Function

So, I think we can get started with the code and now you would not have any doubt now I think.

Basic Search Screen

So, this will be our basic Search Screen code that will be used in navigation:

In the above snippet we are just setting our states but not using the state value in most of our states. We will use them later when we start getting fetching data from the youtube Api.

Above in the navigationOptions where we return NavOptionsdefaultSearchdata we havn’t defined yet. So, let’s also define it now. If you don’t know what are doing here just see Part 1 for clearance.

So, in the ‘NavigationOptions’ file present in the constants folder like below

let’s add a another export statement(already 1 there as told in part1) and edit the file as follows.

So, now our this file is also complete now. Now, here is a small explanation related to useEffct used in the above to above code snippet(Search.js)

By tenor.com

What is useEffect

We also used useEffect in the above snippet. So what is useEffect?. First, If you have worked with class based views, useEffect is same componentDidMount if you are passing a empty array [] as the second argument and can also be used as componentDidUdate if pass some value in the array and can also be used as componentWillUnmount if you add a return or cleanup functiontion at the end which will run when the component is unmounted.

If you are new to the names or are new react native, you should see some videos but useEffect because useEffect can’t be explained in just 2 or 3 lines but here is some basic usage incase you know useEffect and just need to refresh.

UseEffect is a react hook by which you can tell your component do something after the first render or when there is a change in value of the state that we pass to it. By default, useEffect runs after the first render when the app starts. But if you don't want to do something on the first render but do it later you can combine it with useRef (which we will know a bit down). And Here is the basic usage of useEffect.

useEffect(() => {
}, []); // Dependancy array (Second Argument)

So, now let’s working on youtube API and start bringing some data.

Working On Getting and Displaying Data from Youtube Api

umm, let’s first work on our component which displays our video when we search for it. So, in the components folder add a file called ‘Card.js’ and add the following code to it.

We imported a another component called TimeReturn above ☝️☝️☝️☝️. Why do we need it? When we get the time from the youtube API, we get it as 2021–08–28T18:51:05Z something like in this format but we need it like ‘1 day ago’ ‘2 years ago’ right? So let’s make a file called ‘TimeReturn.js’ in the ‘constants’ folder like this:

And add the following code to it:

Please see the ‘date fns’ documentation for more info.

Oops! 1 important thing I just forget!! What about the component which shows the related search item. So let’s quickly add 1 more new file called ‘RelatedSearchItem.js’ in the components folder and add the following code to it.

So, now I think we can complete our rest Search.js file and complete our project. Following is the code for the complete Search.js file with all the concepts explained in the comments. I have removed the code related to redux above. We will work on redux in the Part-5 where will get the Api key from the redux store (In all screens) which will be dispatched from our Error Page.

Search.js

I have explained all the code in comments. So, see the comments again or just take help from ‘Google Baba’ incase of any doubt and with this we have completed our whole Search.js file. If you run now, your app you should be able to see your Search Screen , While you type see search suggestions and do a search To see Youtube Videos commming along with unlimited scrolling concept.

So, this is for this tutorial and in the next part we will create our videoPlayer screen which will play the videos and show the comments. Till then stay safe, stay healthy

Thank you