Rainbow Button

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:

npm install expo-linear-gradient

​

Import

import { RainbowButton } from '@/components/common/buttons/rainbow/rainbow-button';

​

Props

​

Usage

​

Basic Usage

import React from 'react';
import { Text } from 'react-native';
import { RainbowButton } from '@/components/common/buttons/rainbow/rainbow-button';

const MyComponent = () => {
    return (
        <RainbowButton onPress={() => console.log('Pressed!')}>
            <Text style={{ color: 'white' }}>Rainbow Button</Text>
        </RainbowButton>
    );
};

​

Custom Colors and Duration

const CustomRainbowButton = () => {
    return (
        <RainbowButton
            onPress={() => console.log('Pressed!')}
            colors={['#FF0000', '#00FF00', '#000' /* USE DIRECTLYDARK/LIGHT COLOR AT THE END*/]}
            duration={2000}
            height={50}
            borderRadius={25}
            bgColor="#FFFFFF"
        >
            <Text style={{ color: 'black' }}>Custom Rainbow</Text>
        </RainbowButton>
    );
};  

​

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.