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

PropTypeRequiredDefaultDescription
onPress() => voidYes-Function called when pressed
colorsstring[]No['#1DB954', '#00ff4e', '#333']Gradient colors array
durationnumberNoANIMATION_DURATION.D30Animation duration
bgColorstringNotheme.backgroundBackground color
heightnumberNoBUTTON_HEIGHT.mdButton height
borderRadiusnumberNoBORDER_RADIUS.mdBorder radius
mnumberNo-Margin override
styleViewStyleNo-Container style
buttonStyleViewStyleNo-Inner button style

​
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