fbpx

YouTube UI in React Native | Step by Step Implementation

YouTube UI in React Native | Step by Step Implementation

Launch the next Yelp in minutes

Download this gorgeous React Native Store Locator app template to create your own store finder app in just a few minutes. By using this fully-coded starter kit written in React Native, you’re saving weeks of design and development and can focus on other important efforts such as customer engagement and marketing.

Check out here

 

In this tutorial, we are going to learn how to build a YouTube home tab UI using only React Native. We all know that YouTube is a popular video platform where people can most their, videos, vlogs, music videos, etc. Not only that people make a great amount of money through the YouTube platform. You can browse through billions of videos from all across the world in this platform. So, In this tutorial, we are going to replicate its home tab using Basic React components and styling. We are also going to use some icons from the react-native-vector-icons package as well as some mock data from YouTube APIs.

The tutorial is very simple and easy to understand.

We are going to divide the tutorial into various steps so that it will easier for you to grasp the concept, components and the styling as we move along.

The basic steps involved to complete YouTube UI in React Native are as follows:

  1. Initialize a new React Native project using React Native CLI.
  2. Get started with building the header.
  3. Creating the bottom tab bar.
  4. Creating the Video component.
  5. Displaying multiple video component with FlatList.

So, let’s get started!!

 

1. Initialize React Native project

First of all, we are going to set up the whole React Native project with imported packages for this project already installed. Now, we need to initialize a new React Native project using the following command:

Using React Native CLI,

react-native init youTubeUI

We can run this command in our desired directory after we have React Native CLI globally installed. As a result, we will get the full-fledged React Native boilerplate project on our directory.

After that, we need to install the required packages for building the YouTube UI here. Rest assured, the only package we are going to use here is the react-native-vector-icons package. So, to install the vector icons into our React Native project, we need to run the following commands in our project directory:

Using npm,

npm install –save react-native-vector-icons.

Then, we need to run the following command to link this package dependency into our project:

react-native link

Now, we have a React Native project with all the packages required to build YouTube UI installed and linked.

Next, let’s get started with building the UI.

 

 

2. Creating Header for YouTube UI

In this step, we are going to create the Header for our YouTube UI. If we see in the YouTube app, the header consists of three main components. They are a YouTube logo, a search button, and an account button.

We can get the YouTube official logo from their official website here. We need to download the logo and copy it to our assets folder in our project directory as shown in the screenshot below:

For the search button and account button, we are going to use the vector icons.

First, we are going to build a header with a logo on the left side. To implement this header UI, we can use the code available in the code snippet below in our App.js file:

import React, { Component } from 'react';

import { StyleSheet, Text, View, Image, TouchableOpacity, } from 'react-native';

export default class App extends Component {

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.navBar}>

          <Image source={require('./assets/logo.png')} style={{ width: 98, height: 22 }} />

        </View>

      </View>

  );

 }

}

Here, we have all the components that are required to build this UI already imported. We are going to make use of View and Image component in order to get that logo to left side of the header.

Then, we add some custom styles to our components using Stylesheet component imported from the react-native library. Then, bind those styles to our DOM components as you can see in the code snippet above. There is also an in-line style applied to the Image component for its width and height. The source for the Image component is imported from our assets folder i.e. (./assets/logo.png).

The styles properties applied to the components are provided in the code snippet below;

const styles = StyleSheet.create({

  container: {

      flex: 1

  },

  navBar: {

      height: 55,

      backgroundColor: 'white',

      elevation: 3,

      paddingHorizontal: 15,

      flexDirection: 'row',

      alignItems: 'center',

      justifyContent: 'space-between'

  },

});

As a result, we will see the following result in our emulator screen:

 

As we can see that we have got our header and the logo on the left side of the header in our app screen.

Now, we are going to add the icons to our header.

Adding icons

Here, we are going to use the MaterialIcons package provided by the react-native-vector-icons package. In order to use these icons into our project, we need to import the icons first. We can do this by using the following piece of code into our App.js file :

import Icon from 'react-native-vector-icons/MaterialIcons';

Now, we can use the Icon element to integrate Material icons into our screen. The highlighted code in the code snippet below shows how the icons are to be integrated into our project.

export default class App extends Component {

  render() {

    return (

      <View style={styles.container}>

        <View style={styles.navBar}>

          <Image source={require('./assets/logo.png')} style={{ width: 98, height: 22 }} />

          <View style={styles.rightNav}>

            <TouchableOpacity>

              <Icon style={styles.navItem} name="search" size={25} />

            </TouchableOpacity>

            <TouchableOpacity>

                <Icon style={styles.navItem} name="account-circle" size={25} />

            </TouchableOpacity>

        </View>

     </View>

  </View>

  );

 }

}

Here, we are wrapping the TouchableOpacity component around the Icon component in order to make the icons clickable.

Now, we need to add some styles and bind them to the components above as shown in the code snippet above.

The styles required are provided in the code snippet below:

rightNav: {

    flexDirection: 'row'

},

navItem: {

    marginLeft: 25

},

As a result, we can see the icons on the right side of the header in the emulator screen below:

Now, the task of creating the YouTube UI Header is complete.

Next, we are going to move to the bottom of the UI in order to create a Tab bar and its Tabs.

 

 

3. Creating a Tab bar

In this step, we are going to create a tab bar which resides at the bottom of the YouTube UI.

First, let’s create a tab bar View component that resides at the bottom of the screen. In order to do that, we need to use the code highlighted below with the custom styles:

<View style={styles.container}>

  <View style={styles.navBar}>

    <Image source={require('./assets/logo.png')} style={{ width: 98, height: 22 }} />

    <View style={styles.rightNav}>

      <TouchableOpacity>

        <Icon style={styles.navItem} name="search" size={25} />

      </TouchableOpacity>

      <TouchableOpacity>

        <Icon style={styles.navItem} name="account-circle" size={25} />

      </TouchableOpacity>

    </View>

   </View>

   <View style={styles.body}>

   </View>

   <View style={styles.tabBar}>

   </View>

</View>

Here, the View component with body style bound to it is just for space in-between the header and the tab bar at the bottom.

The styles required for the tab bar is provided below:

body: {

  flex: 1

},

tabBar: {

  backgroundColor: 'white',

  height: 60,

  borderTopWidth: 0.5,

  borderColor: '#E5E5E5',

  flexDirection: 'row',

  justifyContent: 'space-around'

}

As a result, we can see the white tab bar at the bottom of the screen in the emulator screenshot below:

Now, we need to add icons to represent different tabs in the Tab bar. We also need to make the icons clickable using the TouchableOpacity component just as before.

Adding icons

Here, we are going to use the same Material icons provided by the vector icons package. To add the icons representing the tabs in the tab bar, we need to use the code from the following code snippet into our App.js file:

<View style={styles.tabBar}>

  <TouchableOpacity style={styles.tabItem}>

    <Icon name="home" size={25}/>

    <Text style={styles.tabTitle}>Home</Text>

  </TouchableOpacity>

  <TouchableOpacity style={styles.tabItem}>

    <Icon name="whatshot" size={25} />

    <Text style={styles.tabTitle}>Trending</Text>

  </TouchableOpacity>

  <TouchableOpacity style={styles.tabItem}>

    <Icon name="subscriptions" size={25} />

    <Text style={styles.tabTitle}>Subscriptions</Text>

  </TouchableOpacity>

  <TouchableOpacity style={styles.tabItem}>

    <Icon name="folder" size={25} />

    <Text style={styles.tabTitle}>Library</Text>

  </TouchableOpacity>

</View>

Here, TouchableOpacity component is wrapped around the Icon and Text component in order to make the icons and the text clickable.

Now, the styles that are bound to the components, highlighted in the code snippet above is given below:

tabItem: {

  alignItems: 'center',

  justifyContent: 'center'

},

tabTitle: {

  fontSize: 11,

  color: '#3c3c3c',

  paddingTop: 4

}

Now, our tab bar is complete and if we re-run our emulator, we are going to get the following screen with Header and tab bar:

Hence, we have completed the implementation of tab bar UI here.

Next, we build a custom component in order to display the video sections in the body of the app screen.

4. Creating a YouTube Video Section

In this step, we are going to create a component that holds our video section. For that, first, we need to create a directory named components in our project folder and also create a file named VideoSections.js inside the components directory as shown in the screenshot below:

Then, we also require mock data for displaying the YouTube video contents in our app body. For, the mock data, we can use the data provided by YouTube APIs that is available here.

Now, we need to create a JSON file in order to copy the data from the YouTube API link provided above. So, just create a file named data.json inside the assets folder and copy all the data from the YouTube API link to that JSON file.

Now, we need to import the JSON data from data.json file into for App.js file. In order to do that, we need to add the following code to our App.js file:

import data from './assets/data.json';

Now, all the data from our JSON file is available in the data variable.

Next, we need to import the VideoSections.js component file into our App.js file using the following piece of code:

import VideoSections from './components/VideoSections';

Now, we need to initialize the VideoSections component inside the View bound with body styles as shown in the code snippet below:

<View style={styles.body}>

  <VideoSections

video={data.items[0]}

 />

</View>

Here, we have passed a single data as a prop to VideoSections component in order to implement a single video section component.

 

Working on VideoSection.js Component

Here, we start to implement for video section body UI in VideoSection.js file. The code to implement the entire VideoSection component is provided in the code snippet below:

import React, {Component} from 'react';

import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';

export default class VideoSection extends Component{

  render(){

    let video = this.props.video;

    return(

      <View style={styles.container}>

        <Image source={{ uri: video.snippet.thumbnails.medium.url }} style={{ height: 200 }} />

        <View style={styles.descContainer}>

          <Image source={{ uri: 'https://randomuser.me/api/portraits/lego/5.jpg' }} style={{ width: 50, height: 50, borderRadius: 25 }} />

          <View style={styles.videoDetails}>

          <Text numberOfLines={2} style={styles.videoTitle}>{video.snippet.title}</Text>

          <Text style={styles.videoStats}>{video.snippet.channelTitle + " · " + nFormatter(video.statistics.viewCount, 1) + " · 3 months ago "}</Text>

        </View>

        <TouchableOpacity>

          <Icon name="more-vert" size={20} color="#999999"/>

        </TouchableOpacity>

      </View>

    </View>

  )

 }

}

function nFormatter(num, digits) {

  var si = [

    { value: 1, symbol: "" },

    { value: 1E3, symbol: "k" },

    { value: 1E6, symbol: "M" },

    { value: 1E9, symbol: "G" },  

    { value: 1E12, symbol: "T" },

    { value: 1E15, symbol: "P" },

    { value: 1E18, symbol: "E" }

  ];

  var rx = /\.0+$|(\.[0-9]*[1-9])0+$/;

  var i;

  for (i = si.length - 1; i > 0; i--) {

    if (num >= si[i].value) {

     break;

    }

  }

  return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol + ' views';

}

Here, we have imported all the components required at the beginning of the code snippet. Then, we have initialized the video variable with this.props.video prop passed down from the App.js.

Then, we have implemented a function named nFormatter which takes two parameters num and digit. The num parameter takes the viewCount from the data.json file available in video variable and we initialize the digit as 1.

This nFormatter function is available in StackOverflow and is used to format the number of views that we got from data.json file.

The Image component is used to display the thumbnail available in the JSON file and the owner of the video. Then, we used the Text component to display the title and number of views.

Then, TouchableOpacity component wraps the vertical dots icon at the right side of the tile in order to make the icon clickable

Now, we need to bind these components with styles which are available in the code snippet below:

const styles = StyleSheet.create({

  container: {

    padding: 15

  },

  descContainer: {

    flexDirection: 'row',

    paddingTop: 15

  },

  videoTitle: {

    fontSize: 16,

    color: '#3c3c3c'

  },

  videoDetails: {

    paddingHorizontal: 15,

    flex: 1

  },

  videoStats: {

    fontSize: 15,

    paddingTop: 3,

    color : "grey"

  }

});

As a result, if we re-run our emulator, we get following screen which displays the video item just as in actual Youtube UI:

 

 

 

5. Multiple video items in the body section

Lastly, in this final step, we are going to create a list of videos in the body section of our screen. For this, we are going use the FlatList component and feed the data from the data.json file into the FlatList data prop in our App.js file. Then, we are going to render the VideoSections component for each item in the data.json file. We have used item.id as the keyExtractor for FlatList in order to make each item in the list unique. Then finally, we add an ItemSeparatorComponent to separate each VideoSection component in the list. The code to perform all this is provided in the code snippet below. We need to copy the code into the body section of our App.js file.

<View style={styles.body}>

  <FlatList

    data={data.items}

    renderItem={(video)=><VideoSections video={video.item} />}

    keyExtractor={(item)=>item.id}

    ItemSeparatorComponent={()=><View style={{height:0.5,backgroundColor:'#E5E5E5'}}/>}

  />

</View>

Finally, we get our complete YouTube UI which we can see the emulator screen below:

 

The overall look and the simulation of the app are provided below:

 

Conclusion

In this tutorial, we learned how to implement the complete YouTube UI displaying Home tab using React Native. We went through various steps of initializing the new React Native project, installing required dependency like react-native-vector-icons, creating custom components, using in-built React Native components, importing images and JSON files, etc. These steps will help you create your very own YouTube UI as well as help you to learn and understand the different concept of styling the React Native components. The entire code for creating this YouTube UI app is available in the snack.

Resource

React Native Tutorial (Only UI) – Building Youtube UI in 30 Mins

 

Krissnawat Kaewsanmuang

Fullstack Javascript developer from beautiful Chiangmai, love Americano and travel so much

Leave a Reply

Your email address will not be published. Required fields are marked *