Installation

Add the dependency:

npm i react-native-elegant-header

Peer Dependencies

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

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Change Log

Change log will be here !

Author

FreakyCoder, [email protected]

License

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