React Native Gradient Buttons 

Version
Platform
License

Lightweight, customizable and haptic Gradient Buttons for React Native.

Examples

Requirements

Requires React and React Native.

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

  • styleViewStyle
    • No default
    • options: any styles you want to apply to the button
  • textString
    • No default
    • options: any string
  • textStyleTextSyle
    • default: {}
    • options: any styles you want to apply to the text
  • gradientBeginString
    • default: '#00d2ff'
    • options: Any hex, rgb, or color
  • gradientEndString
    • default: '#3a47d5'
    • options: Any hex, rgb, or color
  • gradientDirectionString
    • default: 'horizontal'
    • options: 'horizontal''vertical''diagonal'
  • heightNumber or String (for %)
    • default: 75
    • options: any number
  • widthNumber or String (for %)
    • No default
    • options: any number
  • radiusNumber
    • default: 50
    • options: any number
  • impactBoolean
    • default: false
    • options: true or false
  • impactStyleString
    • default: 'Heavy'
    • options: 'Heavy''Medium''Light'
  • onPressActionFunction
    • No default
    • options: any function you want to pass to the Gradient Button

Design+Code Specifc 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 />
  </View>

For a more detailed example, see my example projectReact Native Auth Screens.