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

​

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