Category: Reactnative

Card component use to create Header in react native. Now we will create a common folder for common design component . By Using props and children props we will get data in these design component.

Create new folder src in your project folder

Now create a new folder common in src folder

So your folder hierarchy will be

Youtube_video

-src

— common

Adding Header file

Now create Header.js file in common folder and open it in editor

Please open Header.js file in editor and import React, Component, View and Text . So we will do same thing as we did before

import  React, { Component } from 'react';

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

Now we will create Header component

class Header extends Component {
    render() {
        return (
          <View>
            <Text>Header Text Here</Text>
         </View>
       );
     }
}

Now we will export this header. So add last line in Header.js

export default Header;

Now our Header component is ready to export . Now we will import this header in App.js so open App.js and write below last import line

import  Header from './src/common/Header';

Now call Header in View in App.js

So we will write <Header /> just above <Text> , so now our App.js code will be like this

class YoutubeVideo extends Component {

    render() {

        return (

            <View>

                <Header />

                <Text>Youtube Video</Text>

            </View>

       )

    }

}

export default YoutubeVideo;

Now press two time r button and see result. You will se yout Header text above application

we will call header text easy to change from App.js easily using props. Props carry parameter which is useful to customize component

So add a prop in Header in App.js

<Header HeaderText='My Youtube Play List' />

So change line <Header /> to

Here HeaderText is prop . you can name prop anything what you like to keep and now we will call this prop in Header.js. So replace text in Header component Text component

<Text>Header Text Here</Text>
change to
<Text>{ this.props.HeaderText }</Text>

Props we call in curly braces using this.props. So finally your header code will look like this in Header.js

import  React, { Component } from 'react';

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


class Header extends Component {

    render() {

        return (

         <View>

          <Text>{ this.props.HeaderText }</Text>

        </View>

       );

    }

}


export default Header;

Styling Header Component

Now before export default Header; line in Header.js file, we will create style component and we will call it in Header component. So

const Styles = {


    HeaderStyle: {

        justifyContent: 'center',

        alignSelf: 'stretch',

        alignItems: 'center',

        paddingTop: 20,

        paddingBottom: 20,

        paddingLeft: 20,

        paddingRight: 20,

        elevation: 2,

        backgroundColor: '#ff0000'

}

};

justifyContent place content vertically center  in a view

alignItems place inside content center in a view

Here all details are added if you would like to learn more https://facebook.github.io/react-native/docs/layout-props.html

Now we will apply this style to View component. So we will call like this

style={Styles.HeaderStyle}

So now change in View component of Header.js. It should look like this

<View style={Styles.HeaderStyle}>

<Text>{ this.props.HeaderText }</Text>

</View>

Now we will design Text Component. So we will create another skyle in same Styles const

Add comma after HeaderStyle curly braces and start adding new style so

HeaderText: {

    fontSize: 20,

    color: '#FFFFFF'

}

const Styles = {


    HeaderStyle: {

        justifyContent: 'center',

        alignSelf: 'stretch',

        alignItems: 'center',

        paddingTop: 20,

        paddingBottom: 20,

        paddingLeft: 20,

        paddingRight: 20,

        elevation: 2,

        backgroundColor: '#ff0000'


},

HeaderText: {

    fontSize: 20,

    color:  '#FFFFFF';

}


}

your final Styles code will be

Now we will call this HeaderText style in Text component . So we will add like same way

<View style={Styles.HeaderStyle}>

<Text style={Styles.HeaderText}>{ this.props.HeaderText }</Text>

</View>

Now refresh simulator you will see a better look for header something like this

Card Design is just like to create a boxes to hold Video Title, Video Image and Click button. By Adding some shades border by styling we will add a good design view for all listing. These are common component which we can use many places in app

Now we will create Cards Wrapper and CardsInner so for this we will create new files

CardWrapper.js and CardsInner.js in common folder of src folder

Creating CardWrapper

Open CardWrapper.js file and start importing components from react and react native

import React, { Component } from 'react';
import { View } from 'react-native';

class CardWrapper extends Component {
  render() {
  return (
  <View>
      {this.props.children}
  </View>
  );
 }
}

Here i have added this.props.children this will call the component which we will add inside CardWrapper 

For example if we import CardWrapper and call it like

<CardWrapper>
<View>

<Text>Something here to write</Text>

</View>
</CardWrapper>

So this.props.children will return all code inside <CardWrapper></CardWrapper>
component as children props. I will show you its use further in below code. It will be more clear for you

Styling Card Wrapper

Now we will add some styling to Card Wrapper. So create WrapperStyle

const Styles = {
    WrapperStyle: {
      borderWidth: 1,
      borderRadius: 2,
      borderColor: '#ddd',
      borderBottomWidth: 0,
      shadowColor: '#000',
      shadowRadius: 2,
      elevation: 5,
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10
    }
};

Now we will add this style to CardWrapper component. So add this code in CardWrapper View

<View style={Styles.WrapperStyle}>
{this.props.children}
</View>

So final code will look like this

import React, { Component } from 'react';
import { View } from 'react-native';

class CardWrapper extends Component {
 render() {
  return (
   <View style={Styles.WrapperStyle}>
    {this.props.children}
  </View>
  );
 }
}
const Styles = {
    WrapperStyle: {
      borderWidth: 1,
      borderRadius: 2,
      borderColor: '#ddd',
      borderBottomWidth: 0,
      shadowColor: '#000',
      shadowRadius: 2,
      elevation: 5,
      marginLeft: 5,
      marginRight: 5,
      marginTop: 10
    }
};

export default CardWrapper;

Creating Card Inner

Now open CardInner.js and start import component from react and react-native

import React, { Component } from 'react';
import { View } from 'react-native';

class CardInner extends Component {
render() {
     return (
      <View>
      {this.props.children}
      </View>
    );
}
}

export default CardInner;

Now add style in same way as added for Cardinner component. So now add CardStyles

So now add CardStyles

Now we will add Style to CardInner component View

1. <View style={Styles.CardStyles}>
2. {this.props.children}
3. </View>

import React, { Component } from 'react';
import { View } from 'react-native';

class CardInner extends Component {
  render() {
    return (
    <View style={Styles.CardStyles}>
       {this.props.children}
    </View>
    );
  }
}
const Styles = {
  CardStyles: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#FFF',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};
export default CardInner;

If you are eager  to check how this long CardWrapper and CardInner will look. So just import both in App.js file and this line for test

import CardWrapper from ‘./src/common/CardWrapper’;
import CardInner from ‘./src/common/CardInner’;

And add this test code inside view tag

<CardWrapper>

         <CardInner><Text>Title</Text></CardInner>

         <CardInner><Text>Image</Text></CardInner>

         <CardInner><Text>Play Button</Text></CardInner>

</CardWrapper>

Now refresh Simulator by pressing r button two times and it will show result

If it is working please remove recent code of import and CardWrapper and CardInner. We will use these designs later in listing

So it was a long Code but hope you understand following things

– How create component

– How Import other component

– How design a component

So our design is ready now we will use these cards to list youtube videos. So first we will select a playlist 

Youtube video XML url : Part 5- So open youtube.com and open a play list

Search a channel on youtube and open it. You will find a playlist tab . Open that tab and it will display playlist. Click on any play list and you will see url of play list

https://www.youtube.com/watch?v=DPbnQFxdpPg&list=LLA34Z3lq8FozSQzDHsSLcmQ

In this url last parameter is playlist id LLA34Z3lq8FozSQzDHsSLcmQ

By using this playlist id you can find xml data of youtube videos

So we will now use video.xml url of youtube to display xml data

https://www.youtube.com/feeds/videos.xml?playlist_id=LLA34Z3lq8FozSQzDHsSLcmQ

We will get Title , thumnail url and video id from this xml feed to display list of all videos. To achieve this goal we need to parse xml and get data.

This process I will describe in further Step

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 Get Data From Youtube – If you will see youtube video.xml url, there are many xml node. We  need only all video id , thumbnail url to display image and Title to show on top of Card

XML display data different way than Json. So first we parse xml data and use text to get its value.

First install xmldom so run command

npm install -S xmldom

So after last import line, after a line line break  add parse function which will help to parse data of xml

1. const DOMParser = require(‘xmldom’).DOMParser;

before component start. For example

…..

const DOMParser = require(‘xmldom’).DOMParser;

class VideoList extends Component {

………

First you need to understand few things before we start coding. In this process I am going to use ComponentWillMount, fetch, and state

componentWillMount: this is a lifecycle method . It invoke immediately before mounting occurs.

Fetch: Fetch Networking api used in react native to get content from arbitrary URL

For more details please take a look here

Now in our next process we will use componentWillMount before render function and so

So in VideoList.js remove condole.log(this.props.playlistid); and start writing componentWillMount()

componentWillMount should be called before render() function of component

But before componentWillMount function we will define a state video as array. Because after  fetch were are going to get data in array so open VideoList.js and add before render() function

1. state = { videos: [], }
2. componentWillMount() {
3. const playerid = this.props.playlistid; /* to get playlist id value*/
5. /* Now make url of youtube video smal feed */
6. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
8. /* now its time to fetch data from url */
10. fetch(url)
11. .then(Data => Data.text())
12. /* now we will run console.log to check if data coming after fetch */
13. .then(DataText => console.log(DataText));
14. }

Now refresh simulator and you will see xml data in condole.

But this data is not in array and it is not useful for us to setState with array. As you can see we are getting whole xml as it is. To process our video listing we need a array of Title, Image and Video id. To process this we will process to parse data using a helper function . so create a function called getXMLData

So in componentWillMount function add a new function

1. componentWillMount() {
2. const getXMLData = (listdata) => {
4. }
7. ……

No we will expand our function getXMLData. In this function i have passed a parameter which is used to get data which we get from fetch and parse it

So

1. const getXMLData = (listdata) => {
2. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
3. const allVideoTitle = parseData.getElementsByTagName(‘title’);
4. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
5. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
6. /* define a new array */
8. const finalArray = [];
10. /* push all items in one array */
12. for (const i = 0; i < allVideoId.length; i++) {
13. finalArray.push({
14. title: allVideoTitle[i].textContent,
15. id: allVideoId[i].textContent,
16. thumbnail: allThumbnails[i].getAttribute(‘url’)
17. });
18. }
19. return finalArray;
20. };

In above function you can see we have passed our listdata paramer in parseFromString and then we are getting title, video id and Thumbnail by tag name of xml. But is is not enough because we need a series of array in which we can get all values in one array

So I created a variable with name finallArray as array then using for function I have adding each values in finalArray using push function

Push: This  method help to add new item in  array

Now our function returning array of all items which we need in one array. Now we will call this function to setState of Video array state. It may be little confusing but no need to worry much about it . I will show you further process

Now go to this line of componentWillMount function

.then(DataText => console.log(DataText));

And now remove console.log(DataText) and replace with

1. .then(DataText => this.setState({ videos: getXMLData(DataText) }));

Here we have set state video with array using our helper function getXMLData passing Data of fetch

Now if you need to check what is result of this video state you can write a line of console.log in render function of component.

So go to render function of component and write like this

render() {

   console.log(this.state);

   return (

………

If you will open console you will see result as video array

Now remove console.log from render function.

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. const DOMParser = require(‘xmldom’).DOMParser;
8. class VideoList extends Component {
9. state = { videos: [], }
10. componentWillMount() {
11. const getXMLData = (listdata) => {
12. const parseData = new DOMParser().parseFromString(listdata, ‘text/xml’);
13. const allVideoTitle = parseData.getElementsByTagName(‘title’);
14. const allVideoId = parseData.getElementsByTagName(‘yt:videoId’);
15. const allThumbnails = parseData.getElementsByTagName(‘media:thumbnail’);
16. /* define a new array */
17. const finalArray = [];
18. /* push all items in one array */
19. for (const i = 0; i < allVideoId.length; i++) {
20. finalArray.push({
21. title: allVideoTitle[i].textContent,
22. id: allVideoId[i].textContent,
23. thumbnail: allThumbnails[i].getAttribute(‘url’)
24. });
25. }
26. return finalArray;
27. };
29. const playerid = this.props.playlistid; /* to get playlist id value*/
30. const url = ‘http://www.youtube.com/feeds/videos.xml?playlist_id=’ + playerid;
31. fetch(url)
32. .then(Data => Data.text())
33. .then(DataText => this.setState({ videos: getXMLData(DataText) }));
34. }
35. render() {
36. return (
37. <View>
38. <CardWrapper>
39. <CardInner>
40. <Text>For Title</Text>
41. </CardInner>
42. <CardInner>
43. <Text>For Image</Text>
44. </CardInner>
45. <CardInner>
46. <Text>For Buttons</Text>
47. </CardInner>
48. </CardWrapper>
49. </View>
50. );
51. }
52. }
53. export default VideoList;

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.