Rainbow Button 2

An enhanced version of the Rainbow Button with improved gradient border animations and additional customization options.

​

Installation

npm install react-native-reanimated expo-linear-gradient

​

Import

import { RainbowButton2 } from '@/components/common/buttons/rainbow/rainbow-button2';

​

Props

​

Examples

​

Basic Usage

function Example() {
  return (
    <RainbowButton2
      onPress={() => console.log('Pressed')}
      colors={['#1DB954', '#00ff4e', '#333']}
    >
      <Text>Enhanced Gradient</Text>
    </RainbowButton2>
  );
}

​

Custom Configuration

function CustomExample() {
  return (
    <RainbowButton2
      onPress={() => console.log('Pressed')}
      colors={['#FF0000', '#00FF00', '#0000FF', '#FF00FF']}
      duration={2000}
      height={50}
      borderRadius={25}
      m={10}
    >
      <Text>Custom Gradient</Text>
    </RainbowButton2>
  );
}

​

With Theme Integration

function ThemedExample() {
  const { mode } = useTheme();
  
  return (
    <RainbowButton2
      onPress={() => console.log('Pressed')}
      bgColor={Colors[mode].background}
      colors={[Colors[mode].primary, Colors[mode].secondary]}
    >
      <Text>Themed Button</Text>
    </RainbowButton2>
  );
}

​

Features

• Enhanced gradient border animation

• Improved performance over RainbowButton

• More customization options

• Smoother transitions

• Better theme integration

• Optimized render cycles

​

Animation Details

The enhanced gradient animation uses:

• Reanimated 2’s native driver

• Optimized color interpolation

• Improved gradient positioning

• Smoother rotation transitions

​

Style Guidelines

1. Color Selection:

   • Use complementary colors for gradients

   • Maintain proper contrast with content

   • Consider theme compatibility

2. Animation Timing:

   • Keep duration between 2-4 seconds

   • Use smooth easing functions

   • Consider reduced motion preferences

3. Layout:

   • Maintain consistent spacing with m prop

   • Use standard height values

   • Consider button hierarchy in UI

​

Performance Notes

• Uses native thread for animations

• Optimized gradient calculations

• Minimal JS bridge communication

• Efficient rerender prevention