Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 93 lines (68 sloc) 5.02 KB

React Native Gradient Header

Battle Tested ✅

Fully customizable and unique shape Gradient Header for React Native

npm version npm Platform - Android and iOS License: MIT

React Native Gradient Header React Native Gradient Header

React Native Gradient Header React Native Gradient Header


Add the dependency:

React Native:

npm i react-native-gradient-header

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-linear-gradient": ">= 2.5.6",
"@freakycoder/react-native-helpers": ">= 0.1.2",

Basic Usage

import GradientHeader from "react-native-gradient-header";

<GradientHeader />;

Advanced Usage

import GradientHeader from "react-native-gradient-header";

  subtitle="Have a nice day Kuray"
  gradientColors={["#00416A", "#E4E5E6"]}

Configuration - Props

Property Type Default Description
title string Today change the title
subtitle string Have a nice day change the subtitle
gradient boolean true if you do not want gradient background, simply make this prop false
gradientColors [colors] ["#12c2e9", "#c471ed", "#f64f59"] change the gradient colors
start x,y { x: 0, y: 0 } change the gradient's direction of start
end x,y { x: 1, y: 0 } change the gradient's direction of end
shapeColor color #ba75df change solid background color, it is available when gradient prop is false
imageSource image profile image change the circle image
imageOnPress function null set the onPress function for profile image
position style top set the background shape's position
headerContentComponent component chech the code set your own design for the header content
shadowStyle style shadow set your own shadow style instead of the implemented one
shadowColor color "#000" change the shadow color


  • Expo Support (Coming Soon)
  • Write an article about the lib on Medium




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

You can’t perform that action at this time.