React Native Gradient Buttons

Lightweight, customizable and haptic Gradient Buttons for React Native.

Requirements

Requires React and React Native.

For pure React Native projects you must install react-native-unimodules as part of Expo's bare workflow.

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.