> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Glow Button

> A customizable button component with a glowing border animation effect

The `GlowButton` component is a customizable button that features a rotating gradient border effect, creating an elegant glowing animation. It's built with React Native and Expo, perfect for creating eye-catching interactive elements.

## Installation

No additional installation required if you already have the following dependencies:

* react-native-reanimated
* expo-linear-gradient

## Import

```typescript theme={null}
import { GlowButton } from '@/components/common/buttons/glow-button';
```

## Usage

### Basic Usage

```typescript theme={null}
<GlowButton onPress={() => console.log('Pressed!')}>
  <Text>Click me!</Text>
</GlowButton>
```

### Custom Colors

```typescript theme={null}
<GlowButton 
  colors={['#FF0000', '#00FF00', '#0000FF']}
  onPress={() => console.log('Pressed!')}
>
  <Text>Custom Colors</Text>
</GlowButton>
```

### Custom Styling

```typescript theme={null}
<GlowButton
  width={200}
  height={50}
  borderRadius={25}
  bgColor="#FFFFFF"
  duration={2000}
  onPress={() => console.log('Pressed!')}
>
  <Text>Custom Styled Button</Text>
</GlowButton>
```

## Props

<ResponseField name="onPress" type="() => void">
  Function to call when the button is pressed.
</ResponseField>

<ResponseField name="style" type="ViewStyle">
  Additional styles for the main container.
</ResponseField>

<ResponseField name="children" type="React.ReactNode">
  The content to render inside the button.
</ResponseField>

<ResponseField name="colors" type="string[]" default="[primary10, primary, primary10]">
  Array of colors for the gradient border effect.
</ResponseField>

<ResponseField name="duration" type="number" default="ANIMATION_DURATION.D30">
  Duration of one complete rotation animation in milliseconds.
</ResponseField>

<ResponseField name="bgColor" type="string">
  Background color of the button's inner content area.
</ResponseField>

<ResponseField name="buttonStyle" type="ViewStyle">
  Additional styles for the inner button container.
</ResponseField>

<ResponseField name="height" type="DimensionValue" default="BUTTON_HEIGHT.md">
  Height of the button.
</ResponseField>

<ResponseField name="width" type="DimensionValue" default="BUTTON_HEIGHT.md">
  Width of the button.
</ResponseField>

<ResponseField name="borderRadius" type="number" default="BORDER_RADIUS.sm">
  Border radius of the button.
</ResponseField>

<ResponseField name="m" type="number" default="MARGIN.sm">
  Margin between the border and inner content.
</ResponseField>

<ResponseField name="disabled" type="boolean" default="false">
  Whether the button is disabled.
</ResponseField>

<ResponseField name="containerStyle" type="ViewStyle">
  Additional styles for the gradient container.
</ResponseField>

## Features

* Smooth rotating gradient border animation
* Customizable colors and dimensions
* Support for both square and rounded shapes
* Theme-aware styling
* Accessibility support
* Responsive to layout changes

## Examples

### Circular Glow Button

```typescript theme={null}
<GlowButton
  width={80}
  height={80}
  borderRadius={40}
  colors={['#FF0000', '#FF00FF', '#FF0000']}
>
  <Icon name="plus" size={24} />
</GlowButton>
```

### Full-width Glow Button

```typescript theme={null}
<GlowButton
  width="100%"
  height={50}
  colors={['#007AFF', '#00C6FF', '#007AFF']}
  bgColor="#FFFFFF"
>
  <Text>Submit</Text>
</GlowButton>
```

### Disabled State

```typescript theme={null}
<GlowButton
  disabled={true}
  onPress={() => console.log('This won\'t trigger')}
>
  <Text>Disabled Button</Text>
</GlowButton>
```

## Notes

* The glow effect is created using a rotating LinearGradient
* The component automatically calculates the diagonal length for smooth rotation
* Colors array should contain at least 2 colors for the gradient effect
* The component respects the current theme mode (light/dark)
* All measurements can be provided in numbers or string percentages