# react-native-modern-header > Fully customizable Modern Header View for React Native Latest version **1.0.2** (published 2021-10-22) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-modern-header pnpm add react-native-modern-header yarn add react-native-modern-header bun add react-native-modern-header ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2021-10-22 | | First published | 2020-08-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 68.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 10 | | Author | FreakyCoder | | Maintainers | freakycoder | | Keywords | modern, header, header-view, modern-header-view, FreakyCoder, freakycoder, kuray, Kuray, react, react-native, javascript, ui-lib, rn | ## Links - npm: https://www.npmjs.com/package/react-native-modern-header - Repository: https://github.com/WrathChaos/react-native-modern-header - Homepage: https://www.freakycoder.com - Issues: https://github.com/WrathChaos/react-native-modern-header/issues - npm.io page: https://npm.io/package/react-native-modern-header ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.2 (latest) — 2021-10-22 - 1.0.1 — 2021-10-12 - 1.0.0 — 2021-10-12 - 0.1.0 — 2020-08-23 ## README React Native Modern Header [![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-modern-header) [![React Native Modern Header](https://img.shields.io/badge/-Fully%20customizable%20Modern%20Header%20View%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-modern-header) [![npm version](https://img.shields.io/npm/v/react-native-modern-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-modern-header) [![npm](https://img.shields.io/npm/dt/react-native-modern-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-modern-header) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

React Native Modern Header

# Installation Add the dependency: ```bash npm i react-native-modern-header ``` ## Peer Dependencies
IMPORTANT! You need install them
Zero Dependency ## Version Warning! Version 1.0.0 is re-written from stratch, if you want to use lower than 1.0.0, please check the lower version commits to reach the documentation. # Usage ## Import ```jsx import ModernHeader from "react-native-modern-header"; ``` ## Fundamental Usage ```jsx ``` # Configuration - Props ## Modern Header Props | Property | Type | Default | Description | | --------------------- | :-------: | :--------------: | ---------------------------------------------------------------------------------- | | title | string | undefined | set the title of the header | | style | ViewStyle | default | change/override the main style | | leftComponentDisable | boolean | false | set to `true` for disabling the `left component` | | rightComponentDisable | boolean | false | set to `true` for disabling the `right component` | | onLeftPress | function | undefined | use this to set your own logic when the left component is pressed | | onRightPress | function | undefined | use this to set your own logic when the right component is pressed | | leftComponentStyle | ViewStyle | default | change/override the left component's main style | | rightComponentStyle | ViewStyle | default | change/override the right component's main style | | TextComponent | any | Text | set your own custom Text component instead of `React Native Text` | | titleTextStyle | TextStyle | default | change/override the title's text style | | TouchableComponent | any | TouchableOpacity | set your own custom Touchable component instead of `React Native TouchableOpacity` | | leftImageSource | source | default | change the left icon image | | rightImageSource | source | default | change the right icon image | | leftCustomComponent | any | default | set your own custom component instead of default left image component | | rightCustomComponent | any | default | set your own custom component instead of default right image component | ## Future Plans - [x] ~~LICENSE~~ - [x] ~~Version 1.0.0~~ ## Author FreakyCoder, kurayogun@gmail.com ## License React Native Modern Header is available under the MIT license. See the LICENSE file for more info. --- _Source: https://npm.io/package/react-native-modern-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._