Category: Javascript frameworks

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