Create Youtube Clone With React Native

August 11, 2020

Create Youtube Clone With React Native

App.js

import React ,{useState} from 'react';
import { View,StyleSheet,Image,Text,TouchableOpacity,FlatList} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import VideoItem from '../Componet/VideoItem';
Icon.loadFont();
const TabData=[
  {icon:'home',Title:'Home'},
  {icon:'subscriptions',Title:'Subscriptions'},
  {icon:'whatshot',Title:'Trading'},
  {icon:'folder',Title:'Library'},
]
let JSONDATA=[
  {
    "thumbnail_width": 480,
    "title": "# I'M CAPTAIN JACK SPARROW- MASHUP",
    "type": "video",
    "height": 270,
    "provider_url": "https://www.youtube.com/",
    "chanlenmage":'https://yt3.ggpht.com/a/AATXAJzbtY3LzD3K-Ss2K_C9bZPU0-ReVHs9eIsRPm-hbgc=s176-c-k-c0xffffffff-no-rj-mo',
    "width": 480,
    "thumbnail_height": 360,
    "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/E_JEjE-bwlQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
    "provider_name": "YouTube",
    "version": "1.0",
    "author_name": "Oyasis Entertainment",
    "thumbnail_url": "https://i.ytimg.com/vi/E_JEjE-bwlQ/hqdefault.jpg",
    "author_url": "https://www.youtube.com/channel/UChhFJEmLveXoVlPG6mTQeJA"
  },
  {
    "author_name": "CarryMinati",
    "provider_url": "https://www.youtube.com/",
    "provider_name": "YouTube",
    "thumbnail_height": 360,
    "height": 270,
    "chanlenmage":'https://yt3.ggpht.com/a/AATXAJyWa_nQ2qFeJ67Zwe6QGgaZCs_QlZvn_IGEImn8Iw=s176-c-k-c0xffffffff-no-nd-rj',
    "author_url": "https://www.youtube.com/user/AddictedA1",
    "version": "1.0",
    "width": 480,
    "thumbnail_width": 480,
    "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/zzwRbKI2pn4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
    "title": "YALGAAR - CARRYMINATI X Wily Frenzy",
    "type": "video",
    "thumbnail_url": "https://i.ytimg.com/vi/zzwRbKI2pn4/hqdefault.jpg"
  },
  {
    "version": "1.0",
    "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/omNyqZKpDIw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
    "provider_url": "https://www.youtube.com/",
    "title": "#13 Swipe Animations — React Native Fashion",
    "provider_name": "YouTube",
    "thumbnail_width": 480,
    "type": "video",
    "thumbnail_url": "https://i.ytimg.com/vi/omNyqZKpDIw/hqdefault.jpg",
    "width": 480,
    "chanlenmage":'https://yt3.ggpht.com/a/AATXAJx2Y_k9sbKPRPFDTy-yShwU7gWxPN_-BS_o6dEW3g=s288-c-k-c0xffffffff-no-rj-mo',
    "author_url": "https://www.youtube.com/user/wcandill",
    "thumbnail_height": 360,
    "height": 270,
    "author_name": "William Candillon"
  }
]
const App = () => {
  const [ActivePage, setActivePage] = useState(0);
  const RenderTabIcon=({title,icon,color})=>{
    return <TouchableOpacity style={style.TabIconStyle}>
                  <Icon
                style={style.NavBarIconStyle}
                name={icon}
                color={color}
                size={24}
              />
              <Text style={{color:color}}>{title}</Text>
          </TouchableOpacity>
  }

  return <View style={style.container}>
          
          <View style={style.NavBar}> 
             <Image source={require('../Images/logo.png')} style={{height:20,width:98,resizeMode:'cover'}}></Image>
             <View style={style.RightNavBar}>
             <Icon
                style={style.NavBarIconStyle}
                name="search"
                color="black"
                size={24}
              />
                <Icon
                style={style.NavBarIconStyle}
                name="account-circle"
                color="black"
                size={24}
              />
             </View>

          </View>

               <View style={style.Body}>
               <FlatList
                  data={JSONDATA}
                  renderItem={(Data)=><VideoItem video={Data.item} />}
                  keyExtractor={(item)=>item.title}
                 />
                </View>
              <View style={style.TabBar}>
                {TabData.map((data,index)=>{
                  return <RenderTabIcon  color={(ActivePage===index)?'red':'black'} key={data.Title} title={data.Title} icon={data.icon} key={data.search}/>
                })
                }
              </View>
         
        
         </View>
}
const style=StyleSheet.create({
   container:{
     flex:1,
     backgroundColor:'white'
   },
   NavBar:{
     height:55,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: 2,
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
     backgroundColor:'#fff',
     paddingHorizontal:15,
     flexDirection:'row',
     alignItems:'center',
     justifyContent:'space-between'
   },
   RightNavBar:{
      flexDirection:'row'
   },
   NavBarIconStyle:{
      margin: 5
   },
   Body:{
     flex:1
   },
   TabBar:{
      height:55,
      borderTopWidth:0.5,
      flexDirection:'row',
      borderColor:'#f2f2f2',
      alignItems:'center',
      justifyContent:'space-around'
   },
   TabIconStyle:{
     flexDirection:'column',
     alignItems:'center'
   }
})
export default App;

Videoitem.js

import React from 'react';
import { View,Text,StyleSheet,Image,TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
Icon.loadFont();

const VideoItem = ({video}) => {
    console.info(video)
  return <View style={styles.container}>
              <Image source={{ uri: video.thumbnail_url }} style={{ height: 200 }} />
              <View style={styles.descContainer}>
              <Image source={{ uri: video.chanlenmage }} style={{ width: 50, height: 50, borderRadius: 25 }} />
              <View style={styles.videoDetails}>
                 <Text  style={styles.authorTitle}>{video.author_name}</Text>
                  <Text numberOfLines={2} style={styles.videoTitle}>{video.title}</Text>
              </View>
              <TouchableOpacity>
                        <Icon name="more-vert" size={20} color="#999999"/>
                  </TouchableOpacity>
              </View>
         </View>
}
const styles=StyleSheet.create({
   container:{
     padding: 1,
     margin:5,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
       height: 2,
     },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5,
     backgroundColor:'white'
   },
   descContainer:{
    flexDirection: 'row',
    paddingTop: 10
   },
   videoDetails:{
    paddingHorizontal: 15,
    flex: 1
   },
   authorTitle:{
    fontSize: 17,
    paddingTop: 4,
    fontWeight:'bold'
   },
   videoTitle:{
    fontSize: 14,
    paddingTop: 4
   }
})
export default VideoItem;

Written by Manoj Bhardwaj who lives and works in Mohali Punjab (India). My stackoverflow