react-native-elegant-header

Fully customizable, easy to use Elegant Header component for React Native

Usage no npm install needed!

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

README

React Native Elegant Header

Battle Tested ✅

React Native Elegant Header

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

React Native Elegant Header React Native Elegant Header

Installation

Add the dependency:

npm i react-native-elegant-header

Peer Dependencies

Zero Dependency

Usage

Import

import ElegantHeader from "react-native-elegant-header";

Fundamental Usage

<ElegantHeader
  title="Welcome"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique fermentum magna, porttitor vulputate arcu dapibus et."
/>

Basic Usage with Back Button

<ElegantHeader
  title="Welcome"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique fermentum magna, porttitor vulputate arcu dapibus et."
  enableBackButton
  onPress={() => {}}
/>

Example Project 😍

You can checkout the example project 🥰

Simply run

  • npm i
  • react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

Property Type Default Description
title string undefined change the title
description string undefined change the descrition

Customization (Optionals)

Property Type Default Description
enableBackButton boolean false let you enable the back button (must use it for button)
onPress function undefined set your own logic for the back button functionality when it is pressed
TextComponent Text default set your own component instead of default react-native Text component
TouchableComponent Image default set your own component instead of default react-native Image component
style ViewStyle default set or override the style object for the main container
backButtonImageStyle ViewStyle default set or override the style object for the back button's image style
titleTextStyle TextStyle default set or override the style object for the title's text style
descriptionTextStyle TextStyle default set or override the style object for the description's text style
descriptionContainerStyle ViewStyle default set or override the style object for the description's container style

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Change Log

Change log will be here !

Author

FreakyCoder, kurayogun@gmail.com

License

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