https://github.com/just1and0/react-native-header-types
📱😊Fully customizable Header View for React Native.
https://github.com/just1and0/react-native-header-types
Last synced: 7 months ago
JSON representation
📱😊Fully customizable Header View for React Native.
- Host: GitHub
- URL: https://github.com/just1and0/react-native-header-types
- Owner: just1and0
- License: mit
- Created: 2019-04-20T17:44:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-12T12:36:43.000Z (almost 6 years ago)
- Last Synced: 2024-04-24T01:22:36.001Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-headers
[](https://nodei.co/npm/react-native-header-types/)
- Fully customizable Header View for React Native.
## Installation
```sh
$ npm install react-native-header-types
or
$ yarn add react-native-header-types
```
## Demo
> HeaderView
> Progress Header
## Example
### ProgressHeader
```sh
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 (
);
}
}
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
```sh
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 (
this.hello()} >right gey}
leftComponent={this.hello()} >
}
/>
);
}
}
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.