react-native-headers

• Fully customizable Header View for React Native.

Installation

$ npm install react-native-header-types

or

$ yarn add react-native-header-types

Demo

HeaderView

Progress Header

Example

ProgressHeader

 import  React  from  'react';

import {StyleSheet, Text, View, TouchableOpacity } from  'react-native';
import { ProgressHeader } from  'react-native-header-types'; 
 
  
class  Index  extends  React.Component {

constructor(props) {
	 super(props);
	 this.state  = {
		 isLoading:true,
		 modalVisible:  false,
	};
 }

	render() {
		 return (
			<View  style={styles.container}>
				 <ProgressHeader
					headerBackgroundColor="transparent"
					headerTitle="ProgressBar"
					headerTitleColor="#5DB482"
					currentprogress="1"
					totalProgress="5"
					progressBottomBarColor="#5DB482"
					progressInactiveColor="#F8F8F8"
					progressActiveColor="#5DB482"
					showHeaderTitle={false}/>

				</View>
			);
	}

}

 
const  styles  =  StyleSheet.create({
	container:{
	flex:  1,
	backgroundColor:'#f5f5f5',
	},
});
 

API Usage

|Property| Type | Required | Description | Default | |--|--|--|--|--| |headerBackgroundColor| string | no | Background color of Header | null | |headerTitle| string | no | Title of Header | Default | |headerTitleColor| string | no | Header Title color | null | |currentprogress| number | yes | Current progress of view | null | |totalProgress| number | yes | Total amount of view expected | null | |progressBottomBarColor| string | no | color of progress bar bottom color | null | |progressInactiveColor| string | no | Inactive progress bar color | null | |progressActiveColor| string| no | active progress bar color | null | |showHeaderTitle| boolean| no | show or hide header content| true |

HeaderView

 import  React  from  'react';

import {StyleSheet, Text, View, TouchableOpacity } from  'react-native';
import { HeaderView } from  'react-native-header-types';
import  LottieView  from  'lottie-react-native';
 
  
class  Index  extends  React.Component {

constructor(props) {
	 super(props);
	 this.state  = {
		 isLoading:true,
		 modalVisible:  false,
	};
 }

	render() {
		 return (
			<View  style={styles.container}>
				<HeaderView 
					headerBackgroundColor="#8E8E93"
					headerTitle="Header"
					headerTitleColor="white"
					titleCenter="false"
					rightComponent={<TouchableOpacity onPress={()=>this.hello()} ><Text>right gey</Text></TouchableOpacity>}
					leftComponent={<TouchableOpacity onPress={()=>this.hello()} >
					<LottieView source={require('./../../../assets/lottiefiles/menu.json')} autoPlay style={{width:60}} /></TouchableOpacity>}
					/>
			 </View>
			);
	}

}

 
const  styles  =  StyleSheet.create({
	container:{
	flex:  1,
	backgroundColor:'#f5f5f5',
	},
});
 

API Usage

|Property| Type | Required | Description | Default | |--|--|--|--|--| |headerBackgroundColor| string | no | Background color of Header | null | |headerTitle| string | no | Title of Header | null | |headerTitleColor| string | no | Header Title color | Default | |titleCenter| boolean | no | align Header title center | false | |rightComponent| component | no | Right component | null | |leftComponent| component | no | left component | null |

don't forget to star, like and share :)

Licensing

This project is licensed under MIT license.