A button component featuring a rotating full gradient background animation effect.

Installation

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

Import

import { RainbowButton3 } from '@/components/common/buttons/rainbow/rainbow-button3';

Props

PropTypeRequiredDefaultDescription
onPress() => voidYes-Function called when pressed
colorsstring[]No['#1DB954', '#00ff4e', '#333']Gradient colors
durationnumberNoANIMATION_DURATION.D30Animation duration
bgColorstringNotheme.backgroundBackground color
heightnumberNoBUTTON_HEIGHT.mdButton height
borderRadiusnumberNoBORDER_RADIUS.mdBorder radius

Examples

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