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