react-native-squish-button

Button with elastic border

Demo

Installation

yarn add react-native-squish-button

or

npm install react-native-squish-button

Dependencies

This library depends on react-native-reanimated, 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