Hi Guys,

Today, I will learn you how to use element header in react native. You can easily use element header in react native. First i will create import namespace PricingCard from react-native-elements, after I will using element header using for element header tagadd in react native example.

Here, I will give you full example for simply display element header using react native as bellow.

In the first step Run the following command for create project.

expo init elementheaderExample 

In the step, Run the following command for installation of dependency.

To use element header you need to npm install react-native-elements --save.

To install this open the terminal and jump into your project

cd elementheaderExample 

npm install react-native-elements --save

In this step, You will open App.js file and put the code.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View  } from 'react-native';
import { Header } from 'react-native-elements';

export default function App() {
  return (
    <View style={styles.container}>
      <Header
        leftComponent={{ icon: 'menu', color: '#fff' }}
        centerComponent={{ text: 'My Title', style: { color: '#fff' } }}
        rightComponent={{ icon: 'logout', color: '#fff' }}
         containerStyle={{
          justifyContent: 'space-around',
        }}
      />
        <Text style={styles.textinfo}>
          React Native Header Example
        </Text>
        <Text style={styles.textinfo}>
          MyWebtuts.com
        </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textinfo:{
    textAlign: 'center',
    marginTop:25, 
    fontSize: 20,    
  }
});

In the last step run your project using bellow command.

npm start

It will help you...