Button With Elastic Border For React Native

A simple React Native component to create a fancy button with an elastic border in your application.

Depends on react-native-reanimated, react-native-gesture-handler, and react-native-svg libraries.

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-squish-button

# NPM
$ npm i react-native-squish-button

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

2. Add the SquishButton component to your app.

<SquishButton />

3. Available props to customize the button.

squish?: number;
width?: number;
height?: number;
spacing?: number;
radius?: number;
color?: string;
text?: string;
textStyle?: {
 color?: string;
 fontFamily?: string;
 fontWeight?:
   | 'normal'
   | 'bold'
   | '100'
   | '200'
   | '300'
   | '400'
   | '500'
   | '600'
   | '700'
   | '800'
   | '900';
 fontSize?: number;
};

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

Preview:

Download Details:

Author: mrpmohiburrahman

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/mrpmohiburrahman/react-native-squish-button

License: MIT