React-native-header-baochau9xx NPM

Information

Create by NGUYEN PHUC BAO CHAU

Date: 19/03/2021

Requirements

Install vector-icons

npm install react-native-vector-icons

Link vector-icons to your project

npx react-native link

Installation

npm install react-native-header-baochau9xx

Usage

import React from 'react';
import { View, Text } from 'react-native';
import {Header, Sizes} from 'react-native-header-baochau9xx';

export default class Home extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Header
          title={'This is header'}
          iconLeft={'chevron-back'}  // Ionicons (vector-icons)
          iconRight={'plus'}  // Octicons (vector-icons)
          colorTitle={'red'}
          colorIcon={'green'}
          colorBackground={'yellow'}
          headerSize={Sizes.h100}
          onPressLeft={() => console.log('Click left')}
          onPressRight={() => console.log('Click Right')}
        />
        <View style={{ flex: 1, alignItems: 'center' }}>
          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
            <Text style={{ fontSize: 18 }}>Running..</Text>
          </View>
        </View>
      </View>
    );
  }
}

Available props

Name	Type	Default	Description
colorBackground	color	'#fff'	Color background of header
colorTitle	color	'#555555'	Color of title (text center)
colorIcon	color	'#d4d5d8'	Color of icon left and right
title	string	This is title	Title of header (screen name)
headerSize	number	Scale 100	Size (height) of header
iconLeft	Ionicons		Icon in left of header (Ionicons)
iconRight	Octicons		Icon in right of header (Octicons)
onPressLeft	function		When click left icon
onPressRight	function		When click right icon