react-native-header-types v0.1.4

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

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

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

Licensing

This project is licensed under MIT license.