@@ -56,8 +56,45 @@ const ChannelScreen = props => {
5656 } ) ;
5757 } ) ;
5858
59+ const ItemComp = ( { item, index} ) => {
60+ return (
61+ < Pressable
62+ onPress = { ( ) =>
63+ props . navigation . navigate ( 'Player' , {
64+ videoIndex : index ,
65+ } )
66+ }
67+ style = { styles . videoContainer } >
68+ < Image
69+ source = { {
70+ uri : item ?. thumb ,
71+ } }
72+ resizeMode = "cover"
73+ style = { styles . thumbnail }
74+ />
75+ < View style = { styles . detailContainer } >
76+ < View style = { styles . titleContainer } >
77+ < Text style = { styles . videoTitle } numberOfLines = { 2 } >
78+ { item ?. title }
79+ </ Text >
80+ < Text style = { styles . videoDescription } numberOfLines = { 2 } >
81+ { `${ item ?. views } views . ${
82+ item ?. uploaded === 'just now'
83+ ? 'just now'
84+ : `${ item ?. uploaded } ago`
85+ } `}
86+ </ Text >
87+ </ View >
88+ < TouchableOpacity >
89+ < Icon name = "ellipsis-vertical" size = { 14 } color = "#6c6c6c" />
90+ </ TouchableOpacity >
91+ </ View >
92+ </ Pressable >
93+ ) ;
94+ } ;
95+
5996 return (
60- < View style = { { flex : 1 } } >
97+ < View style = { styles . mainContainer } >
6198 < VirtualizedList
6299 data = { HomeData }
63100 getItemCount = { ( ) => HomeData . length }
@@ -67,7 +104,7 @@ const ChannelScreen = props => {
67104 < View >
68105 < Image
69106 source = { { uri : ChannelData [ 0 ] ?. cover } }
70- style = { { width : '100%' , height : 154 } }
107+ style = { styles . cover }
71108 resizeMode = "contain"
72109 />
73110 < Image
@@ -115,50 +152,9 @@ const ChannelScreen = props => {
115152 ) ;
116153 } }
117154 initialNumToRender = { 5 }
118- renderItem = { ( { item, index} ) => {
119- return (
120- < Pressable
121- onPress = { ( ) =>
122- props . navigation . navigate ( 'Player' , {
123- videoIndex : index ,
124- } )
125- }
126- style = { {
127- flexDirection : 'row' ,
128- marginHorizontal : 8 ,
129- marginVertical : 4 ,
130- width : '100%' ,
131- alignItems : 'flex-start' ,
132- } } >
133- < Image
134- source = { {
135- uri : `http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/${ item ?. thumb } ` ,
136- } }
137- resizeMode = "cover"
138- style = { styles . thumbnail }
139- />
140- < View style = { styles . detailContainer } >
141- < View style = { styles . titleContainer } >
142- < Text style = { styles . videoTitle } numberOfLines = { 2 } >
143- { item ?. title }
144- </ Text >
145- < Text style = { styles . videoDescription } numberOfLines = { 2 } >
146- { `${ item ?. views } views . ${
147- item ?. uploaded === 'just now'
148- ? 'just now'
149- : `${ item ?. uploaded } ago`
150- } `}
151- </ Text >
152- </ View >
153- < TouchableOpacity >
154- < Icon name = "ellipsis-vertical" size = { 14 } color = "#6c6c6c" />
155- </ TouchableOpacity >
156- </ View >
157- </ Pressable >
158- ) ;
159- } }
155+ renderItem = { ItemComp }
160156 ListFooterComponent = { ( ) => {
161- return < View style = { { height : 80 } } /> ;
157+ return < View style = { styles . listFooter } /> ;
162158 } }
163159 keyExtractor = { ( item , index ) => index . toString ( ) }
164160 />
@@ -189,6 +185,9 @@ const styles = StyleSheet.create({
189185 flex : 1 ,
190186 backgroundColor : '#fff' ,
191187 } ,
188+ mainContainer : {
189+ flex : 1 ,
190+ } ,
192191 modal : {
193192 justifyContent : 'flex-end' ,
194193 margin : 0 ,
@@ -221,6 +220,10 @@ const styles = StyleSheet.create({
221220 height : '34%' ,
222221 resizeMode : 'contain' ,
223222 } ,
223+ cover : {
224+ width : '100%' ,
225+ height : 154 ,
226+ } ,
224227 headerRight : {
225228 flexDirection : 'row' ,
226229 alignItems : 'center' ,
@@ -326,6 +329,16 @@ const styles = StyleSheet.create({
326329 fontFamily : 'Roboto-Medium' ,
327330 fontSize : 12 ,
328331 } ,
332+ videoContainer : {
333+ flexDirection : 'row' ,
334+ marginHorizontal : 8 ,
335+ marginVertical : 4 ,
336+ width : '100%' ,
337+ alignItems : 'flex-start' ,
338+ } ,
339+ listFooter : {
340+ height : 30 ,
341+ } ,
329342} ) ;
330343
331344export default ChannelScreen ;
0 commit comments