Installation

Add the dependency:

npm i react-native-profile-header

Peer Dependencies

"@freakycoder/react-native-bounceable": "^0.1.1",

Usage

Import

import ProfileHeader from "react-native-profile-header";

Fundamental Usage

<ProfileHeader />

Configuration - 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 | | style | style | default | set or override your own style instead of default one |

Future Plans

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

Credits

Heavily Inspired by Enes Kargıcı, thank you so much!

Author

FreakyCoder, [email protected]

License

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