​
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

import AnimatedBorderButton from '@/components/common/buttons/animated-border-button';

​
Usage

​
Basic Usage

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

​
With Loading State

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

​
Custom Styling

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

​
Props

​
width
DimensionValue
default:"'100%'"
The width of the button. Can be a number or percentage string.
​
height
number
default:"BUTTON_HEIGHT.md"
The height of the button in pixels.
​
borderRadius
number
default:"20"
The border radius of the button.
​
sliderWidth
number
default:"50"
The width of the animated slider element.
​
sliderHeight
number
default:"5"
The height of the animated slider element.
​
delayInAnimation
number
default:"ANIMATION_DURATION.D30"
The duration of one complete animation cycle in milliseconds.
​
pathColor
string
default:"'#ffce0010'"
The color of the button’s path/track.
​
sliderColor
string
default:"'#FFCE08'"
The color of the animated slider.
​
innerContainerColor
string
default:"'#ffce0010'"
The background color of the button’s inner container.
​
disabled
boolean
default:"false"
Whether the button is disabled.
​
loading
boolean
default:"false"
Whether to show the loading state.
​
onPress
() => void
Function to call when the button is pressed.
​
children
ReactNode
The content to render inside the button.

​
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

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

​
Full-width Button

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

​
Disabled State

<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