!Platform - Android and iOS

src="assets/Screenshots/RN-Profile-Header.gif" />
src="assets/Screenshots/RN-Profile-Header.png" />

Installation

Add the dependency:

``bash
npm i react-native-profile-header
`

Peer Dependencies

IMPORTANT! You need install them

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

Usage

Import

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

Fundamental Usage

`jsx

`

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, kurayogun@gmail.com

License

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