react-native-squish-button

Button with elastic border

Demo

react-native-squish-button in action

Installation

yarn add react-native-squish-button

or

npm install react-native-squish-button

Dependencies


, react-native-gesture-handler, react-native-svg. Please, install these beforehand.

Usage

import { SquishButton } from 'react-native-squish-button';

// ...

<SquishButton
    width={300}
    height={100}
    color="#4E5372"
    squish={7}
    radius={5}
    text="hello"
    textStyle={{
        color: 'white',
        fontFamily: 'Helvetica',
        fontWeight: 'bold',
        fontSize: 16,
    }}
/>

Props

Name description type required
text Svg Text from react-native-svg string Yes
textStyle color, fontFamily, fontWeight, fontSize for svg text style Object Yes
squish Intensity of squish number Yes
height Height of button number Yes
width Width of button number Yes
radius Radius of button number Yes
color Background color of the button string Yes
spacing ⚠️ This is only for internal calculation number No

Contributing

Help me make this library great.

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Social

Twitter Follow LinkedIn Reddit User Karma

GitHub

View Github