Skip to main content
RainbowButton is an animated button component that features a rotating gradient border effect. It’s built with React Native Reanimated and Expo Linear Gradient, providing a visually appealing interactive element.

Installation

Ensure you have the necessary dependencies:

Import

Props

Usage

Basic Usage

Custom Colors and Duration

Hint: Use direct dark/light color at the end of the colors array to make the gradient effect more subtle.

Explanation

  • {onPress}: Required callback function that executes when the button is pressed
  • {colors}: Optional array of colors that define the gradient effect
  • {duration}: Optional animation duration in milliseconds for one complete rotation
  • {bgColor}: Optional background color of the button’s content area
  • {height}: Optional custom height for the button
  • {borderRadius}: Optional border radius value for rounded corners

Animation

The component features a continuous rotation animation of the gradient border, creating a rainbow effect. The animation is powered by React Native Reanimated for smooth performance.

Theme Integration

The button automatically integrates with your app’s theme system, adapting its background color based on the current theme mode (light/dark). This component is perfect for creating eye-catching call-to-action buttons or highlighting important interactive elements in your React Native application.