React Native Element Header Tutorial


Share:
Published By: Admin, Published On: Apr 06, 2021, Category: React Native

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.

Step 1 - Create project

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

expo init elementheaderExample 
Step 2 - Installation of Dependency

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 
Run the following command
npm install react-native-elements --save
Step 3 - App.js

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,    
  }
});
Step 4 - Run project

In the last step run your project using bellow command.

npm start
Output

It will help you...

Share: