Skip to content
A lightweight, customizable and haptic Gradient Button component for React Native 🎨🔘
Branch: master
Clone or download
Latest commit 0a69901 May 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add support for disabled, disabledGradientBegin, and disabledGradient… May 11, 2019
.babelrc add configs Oct 5, 2018
.gitignore add configs Oct 5, 2018
Examples.png Add disabled example to Examples.png May 11, 2019
LICENSE Create LICENSE Oct 5, 2018
README.md Update README.md May 16, 2019
package.json version fix May 11, 2019
yarn.lock rm dependency react native Nov 1, 2018

README.md

React Native Gradient Buttons Tweet

Version Platform License

Lightweight, customizable and haptic Gradient Buttons for React Native.

Examples

Requirements

Requires React and React Native, and Expo (awaiting PR to remove dependency).

Installation

yarn add react-native-gradient-buttons
# or
npm install --save react-native-gradient-buttons

Usage

# ES6 import
import GradientButton from 'react-native-gradient-buttons';

Props

  • style: ViewStyle
    • No default
    • options: any styles you want to apply to the button
  • text: String
    • No default
    • options: any string
  • textStyle: TextSyle
    • default: {}
    • options: any styles you want to apply to the text
  • gradientBegin: String
    • default: '#00d2ff'
    • options: Any hex, rgb, or color
  • gradientEnd: String
    • default: '#3a47d5'
    • options: Any hex, rgb, or color
  • gradientDirection: String
    • default: 'horizontal'
    • options: 'horizontal', 'vertical', 'diagonal'
  • height: Number or String (for %)
    • default: 75
    • options: any number
  • width: Number or String (for %)
    • No default
    • options: any number
  • radius: Number
    • default: 50
    • options: any number
  • impact: Boolean
    • default: false
    • options: true or false
  • impactStyle: String
    • default: 'Heavy'
    • options: 'Heavy', 'Medium', 'Light'
  • onPressAction: Function
    • No default
    • options: any function you want to pass to the Gradient Button
  • disabled: Boolean
    • default: false
  • disabledGradientBegin: String
    • default: '#D3D3D3'
    • options: Any hex, rgb, or color
  • disabledGradientEnd: String
    • default: '#696969'
    • options: Any hex, rgb, or color

Design+Code Specific Gradient Props

  • purpleViolet
  • violetPink
  • pinkDarkGreen
  • blueViolet
  • blueMarine
  • deepBlue

Examples

  <View style={{flex: 1, justifyContent: 'space-evenly', alignItems: 'center', marginVertical: 24}}>
    <GradientButton
      style={{ marginVertical: 8 }}
      text="Gradient Button #1"
      textStyle={{ fontSize: 20 }}
      gradientBegin="#874f00"
      gradientEnd="#f5ba57"
      gradientDirection="diagonal"
      height={60}
      width={300}
      radius={15}
      impact
      impactStyle='Light'
      onPressAction={() => alert('You pressed me!')}
    />

    <GradientButton
      style={{ marginVertical: 8 }}
      textStyle={{ fontSize: 20 }}
      gradientBegin="#874f00"
      gradientEnd="#f5ba57"
      gradientDirection="diagonal"
      height={60}
      width={300}
      radius={15}
      impact
      impactStyle='Light'
      onPressAction={() => alert('You pressed me!')}
    >
      Gradient Button #2
    </GradientButton>

    <GradientButton text="Purple Violet" width='90%' purpleViolet impact />
    <GradientButton text="Violet Pink" width='90%' violetPink impact />
    <GradientButton text="Pink Dark Green" width='90%' pinkDarkGreen impact />
    <GradientButton text="Blue Violet" width='90%' blueViolet impact />
    <GradientButton text="Blue Marine" width='90%' blueMarine impact />
    <GradientButton text="Deep Blue" width='90%' deepBlue impact />
    <GradientButton text="Disabled" width='90%' disabled impact />
  </View>

For a more detailed example, see my example project: React Native Auth Screens.

You can’t perform that action at this time.