@freakycoder/react-native-header-view

v1.2.0

Published

3 years ago

Collection of Header Views for React Native.

Downloads

126

Finally Version 1.0.0 🥳

Finally, this library got the version 1.0.0. More than 5k downloads and it is separated by each header view. This library contains the collection of each header view. If you do not need to use them all, you can reach and install header views on its own repository.

Options

Installation

You can use each Header View separately if you do not want to use the collection.

Add the dependency:

Pure React Native

npm i @freakycoder/react-native-header-view

Peer Dependencies

IMPORTANT! You need install them.

"react-native-gorgeous-header": ">= 0.1.0",
"react-native-classic-header": ">= 0.1.0",
"react-native-modern-header": ">= 0.1.0",
"react-native-apple-header": ">= 0.1.0",
"react-native-profile-header": ">= 0.1.0",

Usage

Gorgeous Header Usage

import { GorgeousHeader } from "@freakycoder/react-native-header-view";

<GorgeousHeader onChangeText={(text) => console.log(text)} />;

Apple Header Usage

import { AppleHeader } from "@freakycoder/react-native-header-view";

<AppleHeader />;

Modern Header Usage

import { ModernHeader } from "@freakycoder/react-native-header-view";

<ModernHeader />;

Advanced Usage

import { ModernHeader } from "@freakycoder/react-native-header-view";

<ModernHeader
  text="Profile"
  rightIconType="Ionicons"
  backgroundColor="#fdfdfd"
  rightIconName="ios-settings"
  rightIconColor={colors.light.primary}
  leftIconComponent={your - icon - component}
  rightIconComponent={your - icon - component}
  leftIconOnPress={() => NavigationService.back()}
/>;

Classic Header Usage

Basic Usage

import { ClassicHeader } from "@freakycoder/react-native-header-view";

<ClassicHeader
  headerTitle="Header"
  rightComponentDisable
  leftComponentOnPress={() => {}}
  hitSlops={
    top: 30,
    bottom: 30,
    left: 30,
    right: 30
  }
/>

Advanced Custom Usage

import { ClassicHeader } from "@freakycoder/react-native-header-view";

<ClassicHeader
  headerTitle="Header"
  leftComponent={
    <TouchableOpacity onPress={() => {}}>
      <Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" />
    </TouchableOpacity>
  }
  rightComponent={
    <TouchableOpacity onPress={() => {}}>
      <Icon name="github" type="AntDesign" size={30} color="purple" />
    </TouchableOpacity>
  }
/>;

Profile Header Usage

import { ProfileHeader } from "@freakycoder/react-native-header-view";

<ProfileHeader />;

Configuration - Props

Gorgeous Header Props

| Property | Type | Default | Description | | ------------------- | :------: | :----------------------------: | ----------------------------------------------------------------------- | | title | string | Order | change the title | | subtitle | string | Healthy food can keep you fit. | change the subtitle | | searchIcon | asset | default | set your own icon for the search one | | titleTextStyle | style | default | set your own style for title text | | subtitleTextStyle | style | default | set your own style for subtitle text | | searchBarStyle | style | default | set your own style for search text input container | | searchInputStyle | style | default | set your own style for search text input | | menuImageStyle | style | default | set your own style for hamburger menu image | | menuImageSource | asset | default | set your own image instead of default hamburger menu image | | menuImageOnPress | function | undefined | use this to set your own function for pressing the hamburger menu image | | profileImageStyle | style | default | set your own style for profile image | | profileImageSource | asset | undefined | use this to set your own image for profile image | | profileImageOnPress | function | undefined | use this to set your own function for pressing the profile image |

Apple Header Props

| Property | Type | Default | Description | | -------------------- | :------: | :-----------------: | ------------------------------------------------------------------------------------- | | dateTitle | string | MONDAY, 27 NOVEMBER | set your own string instead of date title | | largeTitle | string | For You | set your own large title | | imageSource | image | image | set your own image | | onPress | function | null | use this to set onPress functionality | | backgroundColor | color | transparent | use this to change the main container's background color | | borderColor | color | #EFEFF4 | use this to change the bottom border color | | dateTitleFontColor | color | #8E8E93 | use this to change the date title's font color | | dateTitleFontSize | number | 13 | use this to set the date title's font size | | dateTitleFontWeight | string | "600" | use this to set the date title's font weight | | largeTitleFontColor | color | default color | use this to change the large title's font color | | largeTitleFontSize | number | 34 | use this to set the large title's font size | | largeTitleFontWeight | string | "bold" | use this to set the large title's font weight | | dateTitleStyle | style | default style | use this to set your own style for date title (DO NOT RECOMMENDED!) | | largeTitleStyle | style | default style | use this to set your own style for large title (DO NOT RECOMMENDED!) | | containerStyle | style | default style | use this to set your own style for whole container (DO NOT RECOMMENDED!) | | avatarStyle | style | default style | use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!) |

Modern Header Props

| Property | ------------------ | height | width | backgroundColor | | styles | text | textStyle | left | right | leftIconName | leftIconType | leftIconSize | leftIconColor | rightIconName | rightIconType | rightIconSize | rightIconColor | | leftIconComponent | | rightIconComponent | | leftIconOnPress | | rightIconOnPress | | leftDisable | rightDisable | Type | Default | Description | | :--------------: | :------------: | --------------------------------------------------------------- | | string OR number | 70 | change the height of the header | | string OR number | "100%" | change the width of the header | string | #fff | change the background color of the header | | styles | styles | use this to change main style of the header | | string | Header Title | set the header's title | | style | style | set your own style for the header's text | | number | 16 | use this to set left icon's align | | number | 16 | use this to set right icon's align | | string | ios-arrow-back | change the left icon depends on the React Native Vector Icons | | string | Ionicons | change the left icon's type | | number | 25 | change the left icon's size | | color | #bbbabe | change the left icon's color | | string | heart | change the right icon depends on the React Native Vector Icons | | string | Entypo | change the right icon's type | | number | 25 | change the right icon's size | color | #23c4c1 | change the right icon's color | component | Icon | use your own component instead of the integrated Icon component | component | Icon | use your own component instead of the integrated Icon component | function | function | set the function for left icon's onPress | function | function | set the function for right icon's onPress | | boolean | false | disable the left icon component | | boolean | false | disable the right icon component |

Classic Header Props

| Property | Type | Default | Description | | --------------------- | :-------: | :--------: | ---------------------------------------------------------------------------- | | styles | styles | styles | use this to change main style of the header | | height | number | 50 | use this to change the header's height | | width | number | 100% | use this to change the header's width | | statusBarHidden | boolean | false | use this to let Header Component itself re-arrange depends on the status bar | | hitSlops | object | object: 30 | use this to change the header's left and right components' hitSlots | | bottomStick | boolean | false | stick the header to bottom side | | headerTitle | string | "" | use this to set header's title | | backgroundColor | color | #ffffff | use this to change the header's background color | | leftComponent | component | Icon | set the left component | | leftComponentStyle | style | style | set the left component's style | | leftComponentDisable | boolean | false | disable the left component | | leftComponentOnPress | function | null | set the left component's onPress function | | rightComponent | component | Icon | set the right component | | rightComponentStyle | style | style | set the right component's style | | rightComponentDisable | boolean | false | disable the right component | | rightComponentOnPress | function | null | set the right component's onPress function | | centerComponent | component | Icon | set the center component | | centerComponentStyle | style | style | set the center component's style |

ProfileHeader Props

| Property | Type | Default | Description | | ---------------------------- | :-------: | :-------: | --------------------------------------------------------------------------------------- | | onLeftButtonPress | function | undefined | set the logic for left aligned button | | onProfilePicPress | function | undefined | set the logic for profile picture | | onFirstIconPress | function | undefined | set the logic for first icon button | | onSecondIconPress | function | undefined | set the logic for second icon button | | onThirdIconPress | function | undefined | set the logic for third icon button | | profileImageSource | image | default | change the profile image source | | leftAlignedButtonImageSource | image | default | change the left aligned button image source | | firstIconImageSource | image | default | change the first icon image source | | secondIconImageSource | image | default | change the second icon image source | | thirdIconImageSource | image | default | change the third icon image source | | titleText | string | undefined | change the title text | | height | number | 50 | change the profile header's height | | backgroundColor | color | #fff | change the profile header's background color | | leftButtonComponent | component | Image | set your own component instead of default left aligned Button Image | | disableFirstIcon | boolean | false | disable the first icon | | disableSecondIcon | boolean | false | disable the second icon | | disableThirdIcon | boolean | false | disable the third icon | | disableLeftAlignedButton | boolean | false | disable the left aligned icon | | ImageComponent | component | Image | set your own Image component instead of default react native Image such as; FastImage |