React Native Gradient Buttons

Lightweight, customizable and haptic Gradient Buttons for React Native.

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

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