Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Properties of Headers
3.
Example on Configuring Headers
4.
Frequently Asked Questions
4.1.
What is the use of headers in react native?
4.2.
What is the use of createStackNavigator?
4.3.
What is the use of createAppContainer?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Configuring Headers in React Native

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will learn how to configure and design the headers or header bar in your app but first, let’s have a small discussion about what a header is and why it is being used.

Headers are an essential component of any website. Headers define the context of the material described beneath it. Multiple headers for distinct website or application sections must be included when developing a website or application, this aids in the division of the website or application's many sections. React Native also allows you to create headers that are tailored to the needs of your website or application. Now it's time to discuss its properties.

Click on the following link to read further: Hooks in React JS

Properties of Headers

While using the headers in our application, we need to alter their configuration at different times, and this can be done by using different properties of headers. Properties help us to manipulate the configurations and appearance of headers. Its properties are

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. 
Happy Coding!

Previous article
Router in React Native
Next article
Moving between Screens in React Native
Live masterclass