beyazdmr/react-native-gradient-header

Fully customizable and unique shape Gradient Header for React Native

Installation

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.x.x",
"@freakycoder/react-native-helpers": ">= x.x.x",
"@react-native-community/status-bar": ">= 1.0.3"

Basic Usage

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

<GradientHeader />

Advanced Usage

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

<GradientHeader
  title="Title"
  subtitle="Have a nice day Kuray"
  gradientColors={["#00416A", "#E4E5E6"]}
  imageSource={require("./assets/profile.jpg")}
/>

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

ToDos

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

Author

FreakyCoder, kurayogun@gmail.com

License

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