The 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

import { GlowButton } from '@/components/common/buttons/glow-button';

​
Usage

​
Basic Usage

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

​
Custom Colors

<GlowButton 
  colors={['#FF0000', '#00FF00', '#0000FF']}
  onPress={() => console.log('Pressed!')}
>
  <Text>Custom Colors</Text>
</GlowButton>

​
Custom Styling

<GlowButton
  width={200}
  height={50}
  borderRadius={25}
  bgColor="#FFFFFF"
  duration={2000}
  onPress={() => console.log('Pressed!')}
>
  <Text>Custom Styled Button</Text>
</GlowButton>

​
Props

​
onPress
() => void
Function to call when the button is pressed.
​
style
ViewStyle
Additional styles for the main container.
​
children
React.ReactNode
The content to render inside the button.
​
colors
string[]
default:"[primary10, primary, primary10]"
Array of colors for the gradient border effect.
​
duration
number
default:"ANIMATION_DURATION.D30"
Duration of one complete rotation animation in milliseconds.
​
bgColor
string
Background color of the button’s inner content area.
​
buttonStyle
ViewStyle
Additional styles for the inner button container.
​
height
DimensionValue
default:"BUTTON_HEIGHT.md"
Height of the button.
​
width
DimensionValue
default:"BUTTON_HEIGHT.md"
Width of the button.
​
borderRadius
number
default:"BORDER_RADIUS.sm"
Border radius of the button.
​
m
number
default:"MARGIN.sm"
Margin between the border and inner content.
​
disabled
boolean
default:"false"
Whether the button is disabled.
​
containerStyle
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

<GlowButton
  width={80}
  height={80}
  borderRadius={40}
  colors={['#FF0000', '#FF00FF', '#FF0000']}
>
  <Icon name="plus" size={24} />
</GlowButton>

​
Full-width Glow Button

<GlowButton
  width="100%"
  height={50}
  colors={['#007AFF', '#00C6FF', '#007AFF']}
  bgColor="#FFFFFF"
>
  <Text>Submit</Text>
</GlowButton>

​
Disabled State

<GlowButton
  disabled={true}
  onPress={() => console.log('This won\'t trigger')}
>
  <Text>Disabled Button</Text>
</GlowButton>

​
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