A button component that features an animated shine effect moving across its surface.

​
Installation

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

​
Import

import ShinyButton from '@/components/common/buttons/shiny-button';

​
Props

PropTypeRequiredDefaultDescription
onPress() => voidNo-Function called when pressed
bgColorstringNotheme.backgroundBackground color
buttonColorstringNotheme.shinyButtonBorderColorShine effect color
loadingbooleanNofalseLoading state
disabledbooleanNofalseDisabled state
titlestringNo-Button text
titleTypeThemedTextProps['type']No'default'Title text style
heightnumberNoBUTTON_HEIGHT.mdButton height
widthnumber | stringNo'100%'Button width

​
Examples

function Example() {
  return (
    <ShinyButton
      onPress={() => console.log('Pressed')}
      buttonColor="#1DB954"
      title="Shiny Button"
      height={50}
      width={200}
    />
  );
}

Was this page helpful?

Ripple ButtonRainbow Button