A Material Design inspired button component that features a ripple effect animation and haptic feedback.

​
Installation

npm install react-native-reanimated react-native-gesture-handler expo-haptics

​
Import

import RippleButton from '@/components/common/buttons/ripple-button';

​
Props

PropTypeRequiredDefaultDescription
onPress() => voidYes-Function called when pressed
colorstringNotheme.primaryRipple effect color
iconReact.ReactNodeNo-Icon component
iconPosition'left' | 'right'No'left'Icon position
loadingbooleanNofalseLoading state
disabledbooleanNofalseDisabled state
durationnumberNo800Animation duration
heightnumberNoBUTTON_HEIGHT.mdButton height
borderRadiusnumberNoBORDER_RADIUS.mdBorder radius

​
Examples

function Example() {
  return (
    <RippleButton
      onPress={() => console.log('Pressed')}
      color="#1DB954"
      icon={<Icon name="star" />}
      iconPosition="left"
    >
      <Text>Ripple Effect</Text>
    </RippleButton>
  );
}

Was this page helpful?

Radio ButtonShiny Button