01.09.2023 в 21:37

Кнопка с эластичными границами для React Native

Простой компонент React Native для создания в приложении причудливой кнопки с эластичной границей.

Зависит от библиотек react-native-reanimated, react-native-gesture-handler и react-native-svg.

Способ применения:

1. Установите и импортируйте компонент.

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

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

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

2. Добавьте в приложение компонент SquishButton.

<SquishButton />

3. Доступные параметры для настройки кнопки.

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,
   }}
/>

Превью:

Живая демонстрация: Посмотреть демонстрацию

Ссылка на скачивание: Скачать исходный код

Официальный сайт: https://github.com/mrpmohiburrahman/react-native-squish-button

Источник:

#ReactNative

Войти на сайт

Кнопка с эластичными границами для React Native

Способ применения:

Превью:

Источник: