Header Card Component in React Native : Part 3
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