Socket
Socket
Sign inDemoInstall

react-native-modern-header-thecodingbeats

Package Overview
Dependencies
0
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-native-modern-header-thecodingbeats

Fully customizable Modern Header View for React Native With The Coding Beats


Version published
Weekly downloads
2
Maintainers
1
Install size
12.5 kB
Created
Weekly downloads
 

Readme

Source

Installation

Add the dependency:

npm i react-native-modern-header-thecodingbeats

Peer Dependencies

IMPORTANT! You need install them
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 7.0.0",
"react-native-dynamic-vector-icons": ">= 1.0.0"

Usage

Import

import ModernHeader from "react-native-modern-header-thecodingbeats";

Fundamental Usage

<ModernHeader />

Configuration - Props

Modern Header Props

PropertyTypeDefaultDescription
heightstring OR number70change the height of the header
widthstring OR number"100%"change the width of the header
backgroundColorstring#fffchange the background color of the header
stylesstylesstylesuse this to change main style of the header
titlestringHeader Titleset the header's title
titleStylestylestyleset your own style for the header's title
leftnumber16use this to set left icon's align
rightnumber16use this to set right icon's align
leftIconNamestringios-arrow-backchange the left icon depends on the React Native Vector Icons
leftIconTypestringIoniconschange the left icon's type
leftIconSizenumber25change the left icon's size
leftIconColorcolor#bbbabechange the left icon's color
rightIconNamestringheartchange the right icon depends on the React Native Vector Icons
rightIconTypestringEntypochange the right icon's type
rightIconSizenumber25change the right icon's size
rightIconColorcolor#23c4c1change the right icon's color
leftIconComponentcomponentIconuse your own component instead of the integrated Icon component
rightIconComponentcomponentIconuse your own component instead of the integrated Icon component
leftIconOnPressfunctionfunctionset the function for left icon's onPress
rightIconOnPressfunctionfunctionset the function for right icon's onPress
leftDisablebooleanfalsedisable the left icon component
rightDisablebooleanfalsedisable the right icon component

Future Plans

  • LICENSE

Author

The Coding Beats, thecodingbeats@gmail.com

License

React Native Modern Header is available under the MIT license. See the LICENSE file for more info.

Keywords

FAQs

Last updated on 13 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc