Example on Configuring Headers
We've had enough theories on this practical concept now, let's head over to an example to get a better understanding of the above theories. Here we are going to build a simple app that uses a header bar.
App.js
Code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from './components/home.js';
import UserScreen from './components/user.js';
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
About: {
screen: UserScreen
},
},{
initialRouteName: "Home"
});
const AppContainer = createAppContainer(AppNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Explanation: This is the code of the App.js file, here we have defined all the routes where home.js is our initial route.
home.js
Code:
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
export default class Homescreen extends Component {
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#005252',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>Home Screen</Text>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={() => this.props.navigation.navigate('About')}
title="Go To User Screen"
color="orange"
/>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
buttonContainer: {
flex: 1,
margin: 30
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
Explanation: This is the code of the home.js file that shows the home screen. It has its own header and a button which will navigate you to the user screen.
user.js
Code:
import React, { Component } from 'react';
import { Button, View, Text, StyleSheet, Image, HeaderButtons
,HeaderButtonComponent,Item } from 'react-native';
export default class UserScreen extends Component {
static navigationOptions = {
title: 'User',
headerStyle: {
backgroundColor: '#005252',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View style={styles.container}>
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text style={styles.titleText}>User Screen</Text>
</View>
<View style={styles.bottomText}>
<Text>
<Text style={styles.bottomText1}>code</Text>
<Text style={styles.bottomText2}>studio</Text>
</Text>
<Text>Powered By</Text>
<Text style={styles.bottomText3}>Coding Ninjas</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: 'teal'
},
titleText: {
fontSize: 30,
color: 'black',
fontWeight: "bold"
},
bottomText: {
marginBottom:30,
textAlign: 'center',
alignItems: "center",
},
bottomText1: {
fontSize: 25,
fontWeight: 'bold',
},
bottomText2: {
fontSize: 25,
},
bottomText3: {
fontWeight: 'bold',
color: 'orange'
}
})
Explanation: This is the code of the user.js file that shows the user screen. It has a header with a back button.
Output:
Frequently Asked Questions
What is the use of headers in react native?
The navigation options are used to customize the header bar of a React Native application. The screen component's navigation choices are a static property that is either an object or a function. Header Bar Props. headerTitle: This property is used to set the active screen's title.
What is the use of createStackNavigator?
It allows your app to transition between screens by stacking each new screen on top of the previous one. The stack navigation is set up to have the same appearance and feel as iOS and Android: fresh screens slide in from the right on iOS and fade in from the bottom on Android.
What is the use of createAppContainer?
In react, native createAppContainer is a function that returns a React component that takes the React component created by createStackNavigator as a parameter and can be exported directly to be used as our App's root component from App.js.
Conclusion
In this article, we have extensively discussed the Configurations in the header in React Native we discussed all its properties along with an example.
We hope that this blog has helped you enhance your knowledge regarding the Headers. Do check out the awesome content on the Coding Ninjas Website, Android Development, Coding Ninjas Studio Problems, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences, Coding Ninjas Courses, Coding Ninjas Studio Contests, and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow.
Happy Coding!
568+ registered 
