react-native-profile-header
Customizable Profile Header with cool icons for React Native
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
-
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.
Package Rankings
Top 11.62% on Npmjs.org
Badges
Extracted from project README
