Header bar in React Native

Header bar in React Native

There are ways we can have header bar created and styled in React Native

• Using Header Component 
• Using React Navigation 

Case 1: Header Component

1) Install react native elements with the below command 

npm install react-native-elements

2) Import Header from react-native-elements

import { Header } from 'react-native-elements';

3)  In this example we will be creating header with left icon and title using Header Component, containerStyle for setting the headerbar style, lefComponent for adding icon and centerComponent for adding title. 

Case 2: React Navigation

1) Install the below two package in order to start with header bar in react native

On the terminal enter the below commands to install the packages

npm install @react-navigation/native 
npm install @react-navigation/stack

2) Import both the installed packages in App.js file

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

3) Adding header for a Stack Screen in NavigationContainer. NavigationContainer maintains the stack and tracking of all the screens, all the navigations such as stack, drawer, tabs goes here and also helps to maintain nesting of navigations. In this example we are adding a header its style and title to options in a stack screen.

4) Adding icon to the header in options in React Navigation

To add icons we  need to install vector icon package and import the icons from it.

npm install react-native-vector-icons

import Icon from 'react-native-vector-icons/Ionicons';

Adding left icon to header bar by adding headerleft in options  

Please find the complete code here

Outcome of both the cases :

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope you liked it :)