Create Youtube Clone With React Native
August 11, 2020
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;