Gradient Border React Native Gradient Button

https://github.com/05prateek/react-native-gradient-button
Admin
A powerful React Native gradient button component supporting customizable gradient borders, text...
Tokens:5,049
Snippets:28
Trust Score:3.3
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Library and Dependencies

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Instructions for installing the gradient button package and its required peer dependencies using npm or yarn.

```bash
npm install @gradient-border/react-native-gradient-button
npm install @react-native-masked-view/masked-view react-native-linear-gradient
```

```bash
yarn add @gradient-border/react-native-gradient-button
yarn add @react-native-masked-view/masked-view react-native-linear-gradient
```

--------------------------------

### Install React Native Gradient Button

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Commands to install the library and its required peer dependencies using npm or yarn.

```bash
# Install the main package
npm install @gradient-border/react-native-gradient-button

# Install required peer dependencies
npm install @react-native-masked-view/masked-view react-native-linear-gradient

# Or using yarn
yarn add @gradient-border/react-native-gradient-button
yarn add @react-native-masked-view/masked-view react-native-linear-gradient
```

--------------------------------

### Configure Gradient Direction

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Examples of how to control the flow of the gradient by adjusting start and end coordinates for horizontal and vertical transitions.

```tsx
// Horizontal Gradient
<GradientButton
  text="Horizontal Gradient"
  colors={['#FF6B6B', '#FFA62B']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
  onPress={() => console.log('Horizontal gradient pressed')}
/>

// Vertical Gradient
<GradientButton
  text="Vertical Gradient"
  colors={['red', 'yellow', 'orange', 'green', 'cyan']}
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: 1 }}
  onPress={() => console.log('Vertical gradient pressed')}
/>
```

--------------------------------

### Configure Gradient Direction

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Examples of how to control gradient orientation using start/end coordinates or angle-based properties.

```tsx
// Horizontal gradient (default)
<GradientButton
  text="Horizontal"
  colors={['#FF6B6B', '#FFA62B']}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 0 }}
/>
// Vertical gradient
<GradientButton
  text="Vertical"
  colors={['#FF6B6B', '#FFA62B']}
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: 1 }}
/>
// Diagonal gradient using angle
<GradientButton
  text="Diagonal"
  colors={['#FF6B6B', '#FFA62B']}
  useAngle={true}
  angle={45}
/>
```

--------------------------------

### Create Multi-Configuration Gradient Button App

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

A comprehensive example showing how to implement multiple gradient buttons with varying orientations, including vertical, horizontal, and angular gradients. It demonstrates handling button press events and applying consistent styles within a full-screen layout.

```tsx
import React from 'react';
import { SafeAreaView, StyleSheet, ImageBackground, View, Alert } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

function App(): JSX.Element {
  const handlePrimaryAction = () => Alert.alert('Primary Action', 'Vertical gradient button pressed!');
  const handleSecondaryAction = () => Alert.alert('Secondary Action', 'Horizontal gradient button pressed!');
  const handleTertiaryAction = () => Alert.alert('Tertiary Action', 'Angular gradient button pressed!');

  return (
    <ImageBackground
      source={{ uri: 'https://images.pexels.com/photos/3265460/pexels-photo-3265460.jpeg' }}
      style={styles.backgroundImage}
    >
      <SafeAreaView style={styles.container}>
        <GradientButton
          text="Vertical Gradient Button"
          textStyle={styles.buttonText}
          colors={['red', 'yellow', 'orange', 'green', 'cyan']}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
          onPress={handlePrimaryAction}
          style={styles.button}
          accessibilityLabel="Primary action button"
        />
        <GradientButton
          text="Horizontal Gradient Button"
          textStyle={styles.buttonText}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          colors={['red', 'yellow', 'blue']}
          onPress={handleSecondaryAction}
          style={styles.button}
          accessibilityLabel="Secondary action button"
        />
        <GradientButton
          text="Angular Gradient Button"
          textStyle={styles.buttonText}
          useAngle={true}
          angle={45}
          angleCenter={{ x: 0.5, y: 0.5 }}
          colors={['red', 'yellow', 'blue']}
          onPress={handleTertiaryAction}
          style={styles.button}
          accessibilityLabel="Tertiary action button"
        />
      </SafeAreaView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  backgroundImage: { flex: 1, width: '100%', height: '100%' },
  container: { flex: 1, justifyContent: 'space-evenly', alignItems: 'center' },
  button: { marginTop: 4, borderRadius: 10, borderWidth: 4.5, height: '10%', width: '80%', justifyContent: 'center', alignItems: 'center' },
  buttonText: { fontSize: 18, fontWeight: 'bold' },
});

export default App;
```

--------------------------------

### Implement Gradient Buttons with Various Orientations

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Demonstrates how to integrate GradientButton into a React Native application. It showcases vertical, horizontal, and angular gradient configurations using the 'colors', 'start', 'end', and 'useAngle' props.

```tsx
import React from 'react';
import { SafeAreaView, StyleSheet, ImageBackground } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

function App(): JSX.Element {
  return (
    <ImageBackground source={{ uri: 'https://images.pexels.com/photos/3265460/pexels-photo-3265460.jpeg' }} style={styles.backgroundImage}>
      <SafeAreaView style={[styles.container]}>
        <GradientButton
          text="Vertical Gradient Button"
          textStyle={styles.ButtonText}
          colors={['red', 'yellow', 'orange', 'green', 'cyan']}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
          onPress={() => console.log('Primary pressed')}
          style={styles.button}
        />
        <GradientButton
          text="Horizotal Gradient Button"
          textStyle={styles.ButtonText}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          colors={['red', 'yellow', 'blue']}
          onPress={() => console.log('Secondary pressed')}
          style={styles.button}
        />
        <GradientButton
          text="Angular Gradient Button"
          textStyle={styles.ButtonText}
          useAngle={true}
          angle={45}
          angleCenter={{x:0.5,y:0.5}}
          colors={['red', 'yellow', 'blue']}
          onPress={() => console.log('Secondary pressed')}
          style={styles.button}
        />
      </SafeAreaView>
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  backgroundImage: { flex: 1, width: '100%', height: '100%' },
  container: { flex: 1, justifyContent: 'space-evenly', alignItems: 'center' },
  button: { marginTop: 4, borderRadius: 10, borderWidth: 4.5, height: '10%', width: '80%', justifyContent: 'center', alignItems: 'center' },
  ButtonText: { fontSize: 18, fontWeight: 'bold' }
});

export default App;
```

--------------------------------

### Disabled State Gradient Button in React Native

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Illustrates how to disable the gradient button using the `disabled` prop. When disabled, the button prevents user interaction and its appearance is adjusted. This example includes a Switch to toggle the disabled state. Requires React's useState hook and basic React Native components.

```tsx
import React, { useState } from 'react';
import { View, Switch, Text } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const DisabledExample = () => {
  const [isDisabled, setIsDisabled] = useState(true);

  return (
    <View style={{ padding: 20 }}>
      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
        <Text>Toggle Disabled: </Text>
        <Switch value={isDisabled} onValueChange={setIsDisabled} />
      </View>

      <GradientButton
        text={isDisabled ? "Disabled Button" : "Enabled Button"}
        colors={['#C33764', '#1D2671']}
        onPress={() => console.log('Button pressed')}
        disabled={isDisabled}
        activeOpacity={0.7}
        style={{
          borderRadius: 12,
          borderWidth: 3,
          height: 50,
          opacity: isDisabled ? 0.5 : 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        textStyle={{
          fontSize: 16,
          fontWeight: 'bold',
        }}
      />
    </View>
  );
};

export default DisabledExample;
```

--------------------------------

### Implement Basic Gradient Button

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

A simple implementation of the GradientButton component showing how to handle press events and apply basic styling.

```tsx
import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const BasicExample = () => {
  const handlePress = () => {
    Alert.alert('Button Pressed', 'You tapped the gradient button!');
  };

  return (
    <View style={styles.container}>
      <GradientButton
        text="Click Me"
        colors={['#FF6B6B', '#FFA62B']}
        onPress={handlePress}
        style={{ borderRadius: 8, height: 50, width: '80%' }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default BasicExample;
```

--------------------------------

### Implement Basic Gradient Button

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

A simple implementation of the GradientButton component showing the required text, colors, and onPress props.

```tsx
import GradientButton from 'react-native-gradient-button';
const MyComponent = () => {
  return (
    <GradientButton
      text="Click me"
      colors={['#FF6B6B', '#FFA62B']}
      onPress={() => console.log('Button pressed')}
      style={{ borderRadius: 8, height: 50 }}
    />
  );
};
```

--------------------------------

### Accessibility Support

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Guidelines and props for ensuring the GradientButton is accessible to all users.

```APIDOC
## Accessibility Props

### Description
Use these props to ensure screen readers can interpret the button correctly.

### Props
- **accessibilityLabel** (string) - Optional - Text to be read by screen readers.
- **accessibilityHint** (string) - Optional - Additional description of the action.
- **accessibilityRole** (string) - Optional - Defaults to 'button'.

### Example
```tsx
<GradientButton
  text="Submit"
  accessibilityLabel="Submit form button"
  accessibilityHint="Double tap to submit the form"
/>
```
```

--------------------------------

### GradientButton Component Props

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Documentation for the main GradientButton component, including gradient configuration and event handling.

```APIDOC
## Component: GradientButton

### Description
A customizable button component that supports complex gradient borders and backgrounds in React Native.

### Props
- **text** (string) - Required - The text content of the button.
- **colors** (array) - Required - An array of color strings defining the gradient.
- **start** (object) - Optional - Gradient start coordinates {x, y}.
- **end** (object) - Optional - Gradient end coordinates {x, y}.
- **useAngle** (boolean) - Optional - Whether to use a specific angle for the gradient.
- **angle** (number) - Optional - The angle of the gradient in degrees.
- **onPress** (function) - Optional - Callback function triggered when the button is pressed.
- **style** (object) - Optional - Custom styles for the button container.

### Usage Example
```tsx
<GradientButton
  text="Vertical Gradient Button"
  colors={['red', 'yellow', 'green']}
  start={{ x: 0, y: 0 }}
  end={{ x: 0, y: 1 }}
  onPress={() => console.log('Pressed')}
/>
```
```

--------------------------------

### Configure Accessibility Props for GradientButton

Source: https://github.com/05prateek/react-native-gradient-button/blob/main/README.md

Shows how to enhance component accessibility using 'accessibilityLabel' and 'accessibilityHint'. These props ensure that screen readers can effectively communicate the button's purpose to users.

```tsx
<GradientButton
  text="Submit"
  colors={['#FF6B6B', '#FFA62B']}
  accessibilityLabel="Submit form button"
  accessibilityHint="Double tap to submit the form"
/>
```

--------------------------------

### Angle-Based Gradient Button in React Native

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Demonstrates how to create a gradient button with a specified angle using the `useAngle` and `angle` props. This allows for precise control over the gradient's direction. It requires the GradientButton component and basic React Native components.

```tsx
import React from 'react';
import { View } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const AngleGradientExample = () => {
  return (
    <View style={{ padding: 20 }}>
      <GradientButton
        text="45° Diagonal Gradient"
        colors={['#667eea', '#764ba2', '#f093fb']}
        useAngle={true}
        angle={45}
        angleCenter={{ x: 0.5, y: 0.5 }}
        onPress={() => console.log('Angular gradient pressed')}
        style={{
          borderRadius: 25,
          borderWidth: 3,
          height: 55,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        textStyle={{
          fontSize: 16,
          fontWeight: '600',
        }}
      />
    </View>
  );
};

export default AngleGradientExample;
```

--------------------------------

### Loading State Gradient Button in React Native

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Shows how to implement a loading state for the gradient button. When `loading` is true, the button displays a loading indicator and is automatically disabled. This is useful for asynchronous operations. Requires React's useState hook and the GradientButton component.

```tsx
import React, { useState } from 'react';
import { View } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const LoadingExample = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    setIsLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setIsLoading(false);
    console.log('Submission complete!');
  };

  return (
    <View style={{ padding: 20 }}>
      <GradientButton
        text="Submit Form"
        colors={['#11998e', '#38ef7d']}
        onPress={handleSubmit}
        loading={isLoading}
        loadingColor="#FFFFFF"
        loadingSize="small"
        style={{
          borderRadius: 8,
          borderWidth: 2,
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        textStyle={{
          fontSize: 16,
          fontWeight: 'bold',
        }}
      />
    </View>
  );
};

export default LoadingExample;
```

--------------------------------

### GradientButtonProps Interface

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Defines the properties available for the GradientButton component, extending TouchableOpacityProps.

```APIDOC
## GradientButtonProps Interface

The TypeScript interface defining all available props for the GradientButton component. Required props include `text`, `colors`, and `onPress` (inherited from TouchableOpacityProps).

```typescript
import { StyleProp, ViewStyle, TextStyle, TouchableOpacityProps } from 'react-native';

interface GradientButtonProps extends TouchableOpacityProps {
  // Required props
  text: string;                              // Button text to display
  colors: string[];                          // Array of at least 2 gradient colors

  // Optional styling props
  style?: StyleProp<ViewStyle>;              // Container styles
  textStyle?: StyleProp<TextStyle>;          // Text styles (color props not allowed)

  // Loading state props
  loading?: boolean;                         // Show loading indicator (default: false)
  loadingColor?: string;                     // Loading spinner color (default: '#FFFFFF')
  loadingSize?: 'small' | 'large';           // Loading spinner size (default: 'small')

  // Gradient direction using start/end points
  start?: { x: number; y: number };          // Gradient start point (default: { x: 0, y: 0 })
  end?: { x: number; y: number };            // Gradient end point (default: { x: 1, y: 0 })
  locations?: number[];                      // Color stop positions (0-1 range)

  // Gradient direction using angle
  useAngle?: boolean;                        // Use angle instead of start/end (default: false)
  angle?: number;                            // Gradient angle in degrees (default: 0)
  angleCenter?: { x: number; y: number };    // Center point for angle-based gradient

  // Accessibility props
  accessibilityRole?: 'button';              // Role for screen readers (default: 'button')
  accessibilityLabel?: string;               // Label for screen readers (default: text value)
  accessibilityHint?: string;                // Hint describing button action
}
```
```

--------------------------------

### Implement Accessible Gradient Button

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Demonstrates how to integrate a gradient button with accessibility props like accessibilityLabel and accessibilityHint to ensure screen reader compatibility. It uses standard React Native View components to wrap the button for layout control.

```tsx
import React from 'react';
import { View } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const AccessibilityExample = () => {
  return (
    <View style={{ padding: 20 }}>
      <GradientButton
        text="Submit"
        colors={['#FF6B6B', '#FFA62B']}
        onPress={() => console.log('Form submitted')}
        accessibilityRole="button"
        accessibilityLabel="Submit form button"
        accessibilityHint="Double tap to submit the registration form"
        style={{
          borderRadius: 10,
          borderWidth: 3,
          height: 50,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        textStyle={{
          fontSize: 18,
          fontWeight: 'bold',
        }}
      />
    </View>
  );
};

export default AccessibilityExample;
```

--------------------------------

### Gradient Color Stops with Locations in React Native

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

Demonstrates how to precisely control the position of each color in a gradient using the `locations` prop. Each value in the `locations` array corresponds to a color and should be between 0 and 1. Requires the GradientButton component.

```tsx
import React from 'react';
import { View } from 'react-native';
import GradientButton from '@gradient-border/react-native-gradient-button';

const ColorStopsExample = () => {
  return (
    <View style={{ padding: 20 }}>
      <GradientButton
        text="Custom Color Stops"
        colors={['#FF0000', '#FFFF00', '#00FF00', '#0000FF']}
        locations={[0, 0.3, 0.6, 1]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        onPress={() => console.log('Color stops button pressed')}
        style={{
          borderRadius: 15,
          borderWidth: 4,
          height: 55,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        textStyle={{
          fontSize: 15,
          fontWeight: 'bold',
        }}
      />
    </View>
  );
};

export default ColorStopsExample;
```

--------------------------------

### Define GradientButtonProps Interface

Source: https://context7.com/05prateek/react-native-gradient-button/llms.txt

This TypeScript interface defines the required and optional properties for the GradientButton component. It includes support for gradient colors, loading states, coordinate or angle-based direction, and accessibility configurations.

```typescript
import { StyleProp, ViewStyle, TextStyle, TouchableOpacityProps } from 'react-native';

interface GradientButtonProps extends TouchableOpacityProps {
  text: string;
  colors: string[];
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  loading?: boolean;
  loadingColor?: string;
  loadingSize?: 'small' | 'large';
  start?: { x: number; y: number };
  end?: { x: number; y: number };
  locations?: number[];
  useAngle?: boolean;
  angle?: number;
  angleCenter?: { x: number; y: number };
  accessibilityRole?: 'button';
  accessibilityLabel?: string;
  accessibilityHint?: string;
}
```
Tokens:
Raw