Awesome Open Source
Awesome Open Source
React Native Profile Header

Customizable Profile Header wih cool icons for React Native

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

React Native Profile Header React Native Profile Header


Add the dependency:

npm i react-native-profile-header

Peer Dependencies

IMPORTANT! You need install them
"@freakycoder/react-native-bounceable": "^0.1.1",



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


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


FreakyCoder, [email protected]


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

Alternatives To React Native Profile Header
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (255,712
Reactjs (164,470
Google (36,718
Button (18,839
Icons (15,054
Boolean (8,310
Apple (8,306