https://github.com/wrathchaos/react-native-profile-header

Customizable Profile Header with cool icons for React Native
https://github.com/wrathchaos/react-native-profile-header

android apple development front-end google header ios mobile profile-header react react-native reactjs

Last synced: about 1 month ago
JSON representation

Customizable Profile Header with cool icons for React Native

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-profile-header
• Owner: WrathChaos
• Created: 2020-10-04T12:55:32.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-13T07:30:04.000Z (about 4 years ago)
• Last Synced: 2024-10-25T16:58:22.507Z (about 2 months ago)
• Topics: android, apple, development, front-end, google, header, ios, mobile, profile-header, react, react-native, reactjs
• Language: TypeScript
• Homepage: https://freakycoder.com
• Size: 22 MB
• Stars: 11
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![Customizable Profile Header wih cool icons for React Native](https://img.shields.io/badge/-Customizable%20Profile%20Header%20wih%20cool%20icons%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-profile-header)

[![npm version](https://img.shields.io/npm/v/react-native-profile-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-profile-header)

[![npm](https://img.shields.io/npm/dt/react-native-profile-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-profile-header)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  

  



# 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ı](https://dribbble.com/shots/6530185-Beats-Mobile-App-Concept-Design), 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.