A React Native Button with elastic border

by React Native Example

react-native-squish-button

Button with elastic border

Demo

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

GitHub

View Github