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
Usage
Basic Usage
Custom Colors
Custom Styling
Props
() => void
Function to call when the button is pressed.
ViewStyle
Additional styles for the main container.
React.ReactNode
The content to render inside the button.
string[]
default:"[primary10, primary, primary10]"
Array of colors for the gradient border effect.
number
default:"ANIMATION_DURATION.D30"
Duration of one complete rotation animation in milliseconds.
string
Background color of the button’s inner content area.
ViewStyle
Additional styles for the inner button container.
DimensionValue
default:"BUTTON_HEIGHT.md"
Height of the button.
DimensionValue
default:"BUTTON_HEIGHT.md"
Width of the button.
number
default:"BORDER_RADIUS.sm"
Border radius of the button.
number
default:"MARGIN.sm"
Margin between the border and inner content.
boolean
default:"false"
Whether the button is disabled.
ViewStyle
Additional styles for the gradient container.
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
Full-width Glow Button
Disabled State
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