Nanometer Process Machine

    @freakycoder/react-native-header-view

    1.2.0 • Public • Published

    React Native Bottom Bar

    Battle Tested ✅

    Collection of Header Views for React Native

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

    Apple Header Gorgeous Header
    React Native Apple Header View React Native Gorgeous Header View
    Elegant Header Modern Header
    React Native Elegant Header View React Native Modern Header View
    Profile Header Classic Header
    React Native Profile Header View React Native Classic Header View

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

    Change Log

    0.4.13 (2019-11-22)

    Full Changelog

    0.4.11 (2019-11-13)

    Full Changelog

    0.4.10 (2019-11-13)

    Full Changelog

    Implemented enhancements:

    • Apple header Bg colour options #6

    0.4.7 (2019-10-04)

    Full Changelog

    0.4.6 (2019-10-04)

    Full Changelog

    Closed issues:

    • Request to Add product in Start React #5

    Merged pull requests:

    0.4.5 (2019-08-17)

    Full Changelog

    0.3.0 (2019-08-12)

    Full Changelog

    Merged pull requests:

    0.2.61 (2019-03-19)

    Full Changelog

    0.2.6 (2019-03-05)

    Full Changelog

    0.2.5 (2019-03-05)

    Full Changelog

    0.2.4 (2019-03-05)

    Full Changelog

    0.2.3 (2019-03-05)

    Full Changelog

    0.2.2 (2019-03-05)

    Full Changelog

    0.2.0 (2019-02-23)

    * This Change Log was automatically generated by github_changelog_generator

    Credits

    Photo by Joanna Nix on Unsplash

    Author

    FreakyCoder, kurayogun@gmail.com

    License

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

    Install

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

    DownloadsWeekly Downloads

    41

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    31.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • freakycoder