Header Component in React Native : Part 3

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

So change line <Header /> to

 

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

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'

}

 

 

So your final Styles code will be

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';

}


}

 

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

© Copyrights 2014 by STW Services LLP