AnimatedBorderButton
TheAnimatedBorderButton 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
Usage
Basic Usage
With Loading State
Custom Styling
Props
DimensionValue
default:"'100%'"
The width of the button. Can be a number or percentage string.
number
default:"BUTTON_HEIGHT.md"
The height of the button in pixels.
number
default:"20"
The border radius of the button.
number
default:"50"
The width of the animated slider element.
number
default:"5"
The height of the animated slider element.
number
default:"ANIMATION_DURATION.D30"
The duration of one complete animation cycle in milliseconds.
string
default:"'#ffce0010'"
The color of the button’s path/track.
string
default:"'#FFCE08'"
The color of the animated slider.
string
default:"'#ffce0010'"
The background color of the button’s inner container.
boolean
default:"false"
Whether the button is disabled.
boolean
default:"false"
Whether to show the loading state.
() => void
Function to call when the button is pressed.
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
Full-width Button
Disabled State
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-reanimatedfor smooth animations - Inner container color defaults to theme primary color if not specified