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