react-native-modern-header

Fully customizable Modern Header View for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeModernHeader from 'https://cdn.skypack.dev/react-native-modern-header';
</script>

README

React Native Modern Header

Battle Tested ✅

React Native Modern Header

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Modern Header

Installation

Add the dependency:

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

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

Fundamental Usage

<ModernHeader title="Header" />

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

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