Author: STW Services LLP

Design Video List Component : Part 6- Create a components folder in src folder and add VideoList.js file in it, open this file and start importing component

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
3. import CardWrapper from ‘../common/CardWrapper’;
4. import CardInner from ‘../common/CardInner’;
6. class VideoList extends Component {
7. render() {
8. return (
9. <View>
10. <CardWrapper>
11. <CardInner>
12. <Text>For Title</Text>
13. </CardInner>
14. <CardInner>
15. <Text>For Image</Text>
16. </CardInner>
17. <CardInner>
18. <Text>For Button</Text>
19. </CardInner>
20. </CardWrapper>
21. </View>
22. );
23. }
24. }
26. export default VideoList;

So here we created a base design for video listing. No further we will call this component in a file Index.js and pass props of playlist id id from index.js and get it on VideoList.js

If we will keep Play list id from Parse code of VideoList , That will be easy for us to change any time Play List id of youtube and easily we can list any playlist by a quick change


So Now we are going to create Index.js in same component folder. And Add

1. import React, { Component } from ‘react’;
2. import { View } from ‘react-native’;
3. import VideoList from ‘./VideoList’;
5. class Index extends Component {
6. render() {
7. return (
8. <View>
9. <VideoList playlistid=’LLA34Z3lq8FozSQzDHsSLcmQ’ />
10. </View>
11. );
12. }
13. }
14. export default Index;

In this code I imported VideoList component and called it in view component of Index component. You can see I am passing playlistid as props in VideoList component. It is same process which I did in Header Component

Now further we are going to get this playlistid props on VideoList component and print it in console to see what is result

So now we will call Index component in our main App.js file so we can see what is result when app load

So open App.js and import Index component

1. import Index from ‘./src/components/Index’;

Now remove Text component

<Text> Youtube Video </Text>

And add Index component

<Index />

So now its time to refresh simulator again and check what is result .

Great!! We did .

Now we will run debugger in simulator to check our props . So we will call console.log in render method of VideoList.js.

So to run debugger in chrome press command + M button. And select Debug Js Remotely

http://localhost:8081/debugger-ui/ this url will open in chrome. Right click in chrome and open inspect

Click on console

Now we will console.log(this.props.playlistid); in render() { method of VideoList.js

So code will be like this

……
class VideoList extends Component {

 render() {

   console.log(this.props.playlistid);

   return (

…….

Now its time to refresh simulator and check chrome console you will see same playlist id which we passed in props

Well , we are getting play list id of youtube 

Process to call state values : Part 8 – To run all array as loop using our CardWrapper and CardInner, We will use map function . map() will run our design and place value of each array items untill it is null

So it will not be a good idea to write a code in return . I think we should make a helper function and use map and CardWrapper and CardInner component in this function and then call this function in return function.

So create a funtion before render() function of VideoList component

1. renderthumbnails() {
2. return this.state.videos.map(video =>
3. <CardWrapper key={video.id}>
4. <CardInner>
5. <View>
6. <Text>{video.title}</Text>
7. </View>
8. </CardInner>
9. <Image
10. resizeMode={Image.resizeMode.cover}
11. style={{ height: 280, width: null }}
12. source={{ uri: video.thumbnail }}
13. />
14. <CardInner>
15. <Text>{video.id}</Text>
16. </CardInner>
17. </CardWrapper>
18. );
19. }

Now you can see in above code we are using Image component in card so go on top and we will import Image component from react-native so change import line like this

1. import { View, Text, Image } from ‘react-native’;

Now we are ready with our design and listing function so next step is to call this function in return. To call this function we will use curly braces using view component.

So in return please remove all cardWrapper and CardInner code and  add code like this, we have already called these component in renderthumbnails function

1. …..
3. return (
4. <View>
5. {this.renderthumbnails()}
6. </View>
7. );
9. ………

Now refresh simulator and check result .. you can see all data with title image and video id

But you can see page scroll is not working. So to fix this we will use <ScrollView> component

Calling ScrollView component

First import ScrollView from react-native so add ScrollView on top

import { View, Text, Image, ScrollView } from ‘react-native’;

And now add ScrollView in View so

1. …….
3. <View>
4. <ScrollView>
5. {this.renderthumbnails()}
6. </ScrollView>
7. </View>
8. ……..

Now scroll will work , check it by refreshing Simulator

In Place of button i have called video ID . Now in further code we will create a button component in common folder and use it and then call video id on press to send to new screen .

To create a button component we will add new file in common folder of src. Button.js

We will import React and Component from react and

Text and TouchableOpacity from react-native

Touchable opacity so some animation on press so we will use this and later we will call onPress funtion to navigate on another page to view video.

So create Button.js file with this code

1. import React, { Component } from ‘react’;
2. import { Text, TouchableOpacity } from ‘react-native’;
4. class Button extends Component {
5. render() {
6. return (
7. <TouchableOpacity>
8. <Text>View</Text>
9. </TouchableOpacity>
10. );
11. }
12. }
13. export default Button;

Now our button code is ready and we will call this button in VideoList helper fuction where we are calling video id in place of button

So open VideoList.js

Import button component import Button from ‘../common/Button’;

Go to last CardInner component of helper function renderthumbnails() and replace Text with Button component

Now refresh simulator and you will see view text there which we were added in Button component

Now we are going to process button design so open Button.js and add some styling

Styling of Button component

1. const styles = {
3. buttonstyles: {
4. flex: 1,
5. alignSelf: ‘stretch’,
6. borderRadius: 4,
7. borderColor: ‘#000’,
8. borderWidth: 1,
9. backgroundColor: ‘#ff0000’
10. },
11. buttonTextstyle: {
12. fontSize: 16,
13. color: ‘#FFF’,
14. paddingTop: 10,
15. paddingBottom: 10,
16. alignSelf: ‘center’,
17. fontWeight: ‘600’
18. }
20. };

Now call these styles in TouchableOpacity and Text of Button component

1. return (
2. <TouchableOpacity style={styles.buttonstyles}>
3. <Text style={styles.buttonTextstyle}>View</Text>
4. </TouchableOpacity>
5. );

Now refresh simulator and you will see button style is changed to red

Now we need to pass Button pass a props when Button component is pressed . When we press button then a props should be pass to TouchableOpacity on press. Button component press will not work on press until we add press function on TouchableOpacity so

So add

1. <TouchableOpacity onPress={this.props.onPress} style={styles.buttonstyles}>
2. <Text style={styles.buttonTextstyle}>View</Text>
3. </TouchableOpacity>

Now we can make button text more editable so anyone can easily change where they call <Button /> component so we will add children same as we did for Cards components

1. <TouchableOpacity onPress={this.props.onPress} style={styles.buttonstyles}>
2. <Text style={styles.buttonTextstyle}>{this.props.children}</Text>
3. </TouchableOpacity>

So now button can be called with desired button text like this

<Button> Button Text Here </Button>

So Open VideoList.js and change button like this

<Button>

View

</Button>

Now please reload Simulator and check design

So page is ready to display with all video listing. In further process i am going to use navigation to play video on new page with id.

Calling component by navigation props- So first open App.js . In this file we have called Index component so now we will call this using navigation here

So make a function renderIndex before render() function and call it in return

1. renderIndex() {
2. this.props.navigation.navigate(‘Index’);
3. }

And in return () function after header component replace <Index /> with

1. { this.renderIndex() }

So now our Index component from Index.js component will load by navigator

So remove import Index from ‘./src/components/Index’; from this App.js

Now we will do same for VideoList component which is called in Index.js

So again i will create a function in components/Index.js file

1. renderVideoList() {
2. this.props.navigation.navigate(‘VideoList’, {
3. playlistid: ‘LLA34Z3lq8FozSQzDHsSLcmQ’
4. });
5. }

And now i should replace VideoList with this function

1. { this.renderVideoList() }

And remove import from this file 

import VideoList from ‘./VideoList’;

Here you can see I am passing a props of playlistid which i will get on VideoList page like this now

Find this line

const playerid = this.props.playlistid

& change with

1. const playerid = this.props.navigation.state.params.playlistid

To get navigation props value we use this.props.navigation.state.params.propsname

Now in further step we will make a new page to play video and link that page to this navigation . After linking this page to navigation we will call that page on button click and pass a props as video id . After that on View video page we will display video by youtube video id

Creating Component To Display Video – So I added further now we wil make a new file in components folder ViewVideo.js

Now we will start adding code in that so first import React and Component

1. import React, { Component } from ‘react’;
2. import { View, Text } from ‘react-native’;
4. class ViewVideo extends Component {
5. render() {
6. return (
7. <View>
8. <Text>We will play video here…</Text>
9. </View>
10. );
11. }
12. }
14. <span style=”font-weight: 400;”>export default ViewVideo;</span>

Now we will create screen on navigation and call this page. So open index.js on root

So first import  ViewVideo on index

1. import ViewVideo from ‘./src/components/ViewVideo’;

Not add screen for this so add after comma

1. …….
3. YoutubeVideo: {
4. screen: YoutubeVideo
5. },
6. Index: {
7. screen: Index
8. },
9. VideoList: {
10. screen: VideoList
11. },
12. ViewVideo: {
13. screen: ViewVideo
14. }
15. ……

Now our screen is ready to call as navigator. we have button on each video as View. So we will call on Press function to pass props and video id and send to ViewVideo page.

Open VideoList.js file and find code where <Button /> added

Add onPress function in it

1. <Button onPress={() => this.props.navigation.navigate(‘ViewVideo’, { vidid: video.id })}>

this.props.navigation.navigate this function call screen and send to that screen which is added in ‘ ‘ second parameter is props . i have taken vidid as props and assigned video id value to it

So now we will refresh simulator 

Passing Navigation props to screen – Open View Video.js file and get props video id . so our code should be to get value.

this.props.navigation.state.params.vidid;

so add

1. const videoId = this.props.navigation.state.params.vidid;

Now we can call { vidid } and use to display videoid which is clicked on VideoList page. So to check it 

Now in return we will call vidid in Text

So change Text like this

1. <Text>{vidid}</Text>

Now refresh simulator and click on button of any video you will see that video id on that page

Now import WebView from react-native

WebView use to embed any url on page . It is same like we use iframe in normal html code. So we will use youtube embed url to embed video here using this component

Now in return add this code

1. <WebView
2. source={{ uri: ‘https://www.youtube.com/embed/’ + videoId }}
3. />

Modifying Navigation & Header – Copy api key and add in ViewVideo youtube parameter which was null. Now your code is ready to play video.

But you can see a arrow in header of page. If you would like to remove it you nee to pass a option in navigator.

So add this new code

const options = {

 header: null

};

And now we will call this navigation option in StackNavigator so your code should look like this

const AppNav = StackNavigator({

   YoutubeVideo: {

     screen: YoutubeVideo

   },

   Index: {

     screen: Index

   },

   VideoList: {

     screen: VideoList

   },

   ViewVideo: {

     screen: ViewVideo

   }

 },

   {

     navigationOptions: options

   }

);

Final code of screen in index.js

1. import { AppRegistry } from ‘react-native’;
2. import { StackNavigator } from ‘react-navigation’;
3. import YoutubeVideo from ‘./App’;
4. import VideoList from ‘./src/components/VideoList’;
5. import Index from ‘./src/components/Index’;
6. import ViewVideo from ‘./src/components/ViewVideo’;
8. const options = {
9. header: null
10. };
12. const AppNav = StackNavigator({
13. YoutubeVideo: {
14. screen: YoutubeVideo
15. },
16. Index: {
17. screen: Index
18. },
19. VideoList: {
20. screen: VideoList
21. },
22. ViewVideo: {
23. screen: ViewVideo
24. }
26. },
27. {
28. navigationOptions: options
29. }
30. );
33. AppRegistry.registerComponent(‘youtube_video’, () => AppNav);

Now you can see we have blank page when go back , it is because we have Index screen to load then video list screen to load, So now we will do some modifications to use navigator header and remove Index component

Final touch

Now open VideoList.js and change variable with this code

1. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=LLA34Z3lq8FozSQzDHsSLcmQ’;

Now you can see i have directly added playlist id in const url

Well, Now we will create a function to render navbar header

1. renderNavBar() {
2. return (
3. <View style={styles.navBar}>
4. <TouchableOpacity style={styles.logo} >
5. <Text style={styles.text}>Pankaj Bhadouria Masterchef</Text>
6. </TouchableOpacity>
7. </View>
8. );
9. }

and call this function in render function of component where header is called, So remove Header component and add

1. render() {
2. return (
3. <View>
4. { this.renderNavBar() }
5. <ScrollView>
6. {this.renderthumbnails()}
7. </ScrollView>
8. </View>
9. );
10. }

If you want to show video title of youtube on view video page so pass video.title props in onPress function so change like this

1. <Button
2. onPress={() => this.props.navigation.navigate(‘ViewVideo’, { vidid: video.id, vidtitle: video.title })}
3. >

and finally open ViewVideo.js and call this props like this

1. import React, { Component } from ‘react’;
2. import { View, WebView } from ‘react-native’;
3. import NavBar from ‘../common/NavBar’;
5. class ViewVideo extends Component {
6. render() {
7. const videoId = this.props.navigation.state.params.vidid;
8. const videoTitle = this.props.navigation.state.params.vidtitle;
9. return (
10. <View style={{ flex: 1 }}>
11. <NavBar
12. navigator={this.props.navigation}
13. title={videoTitle}
14. />
15. <WebView
16. source={{ uri: `https://www.youtube.com/embed/${videoId}` }}
17. />
18. </View>
19. );
20. }
21. }
23. export default ViewVideo;

Now our application is ready to play youtube video . If you need to find code you can find it on GIT

In this tutorial we learned how to install react native , create component, create design , navigation and parse video xml of youtube

Hope you enjoyed it !!