Skip to content
Fully customizable and unique shape Gradient Header for React Native
JavaScript Objective-C Ruby Java Python
Branch: master
Clone or download
Latest commit 7fd5ab4 Jan 5, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets New logo Aug 22, 2019
example Example is updated Jan 5, 2020
lib/src/components FastImage dependency is removed. Android design hotfix. RN Helpers is… Jul 14, 2019
.eslintrc.js New repo Jul 14, 2019
.gitattributes New repo Jul 14, 2019
.gitignore New repo Jul 14, 2019
.npmignore New repo Jul 14, 2019
.watchmanconfig New repo Jul 14, 2019
LICENSE Create LICENSE Aug 3, 2019
README.md Example is completely upgaded Jan 5, 2020
babel.config.js New repo Jul 14, 2019
package.json New version with new example Jan 5, 2020

README.md

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

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.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";

<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.

You can’t perform that action at this time.