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

# Animated Border Button

> A customizable animated border button component with loading state support

# AnimatedBorderButton

The `AnimatedBorderButton` component is a highly customizable button that features an animated border effect. It supports loading states and can be styled to match your application's theme.

## Installation

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

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

## Import

```typescript theme={null}
import AnimatedBorderButton from '@/components/common/buttons/animated-border-button';
```

## Usage

### Basic Usage

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

### With Loading State

```typescript theme={null}
<AnimatedBorderButton loading={true} onPress={() => console.log('Pressed!')}>
  <Text>Loading Button</Text>
</AnimatedBorderButton>
```

### Custom Styling

```typescript theme={null}
<AnimatedBorderButton
  width={200}
  height={50}
  borderRadius={25}
  sliderColor="#FF0000"
  innerContainerColor="#FFE5E5"
  onPress={() => console.log('Pressed!')}
>
  <Text>Custom Styled Button</Text>
</AnimatedBorderButton>
```

## Props

<ResponseField name="width" type="DimensionValue" default="'100%'">
  The width of the button. Can be a number or percentage string.
</ResponseField>

<ResponseField name="height" type="number" default="BUTTON_HEIGHT.md">
  The height of the button in pixels.
</ResponseField>

<ResponseField name="borderRadius" type="number" default="20">
  The border radius of the button.
</ResponseField>

<ResponseField name="sliderWidth" type="number" default="50">
  The width of the animated slider element.
</ResponseField>

<ResponseField name="sliderHeight" type="number" default="5">
  The height of the animated slider element.
</ResponseField>

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

<ResponseField name="pathColor" type="string" default="'#ffce0010'">
  The color of the button's path/track.
</ResponseField>

<ResponseField name="sliderColor" type="string" default="'#FFCE08'">
  The color of the animated slider.
</ResponseField>

<ResponseField name="innerContainerColor" type="string" default="'#ffce0010'">
  The background color of the button's inner container.
</ResponseField>

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

<ResponseField name="loading" type="boolean" default="false">
  Whether to show the loading state.
</ResponseField>

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

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

## Features

* Smooth border animation effect
* Loading state support
* Customizable colors and dimensions
* Support for circular and rectangular shapes
* Responsive to layout changes
* Theme-aware styling

## Examples

### Circular Button

```typescript theme={null}
<AnimatedBorderButton
  width={80}
  height={80}
  borderRadius={40}
  sliderWidth={30}
>
  <Icon name="plus" size={24} />
</AnimatedBorderButton>
```

### Full-width Button

```typescript theme={null}
<AnimatedBorderButton
  width="100%"
  height={50}
  sliderColor="#007AFF"
  innerContainerColor="#E3F2FF"
>
  <Text>Submit</Text>
</AnimatedBorderButton>
```

### Disabled State

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

## Notes

* The button automatically adjusts its animation pattern when width equals height and borderRadius is at least half of width (circular button)
* The loading state will display a spinner and disable the button
* The component uses `react-native-reanimated` for smooth animations
* Inner container color defaults to theme primary color if not specified