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
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
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.