​
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

Was this page helpful?

ButtonGlow Button