包详细信息

react-native-grip-button

CodArsh491MIT1.0.16

A customizable and animated button for React Native

react-native, button, grip, ui

自述文件

🚀 GripButton – React Native Animated UI

GripButton Demo

📦 Installation

npm install react-native-grip-button
# or
yarn add react-native-grip-button

⚡ Features

🌀 8+ Variants: solid, outline, clear, dashed, ghost, link, elevated, glass

🎨 Theme colors: info, success, error, warning, etc.

🧱 Sizes: small, medium, large

🔒 Disabled state

🔁 Loading state

🔘 Icons with position control

🎯 Debounced press

💫 Press animations: scale, punch, none

🔵 Continuous border animation (for special variants)

🧩 Custom styles, ripple effects, and shape options

🔤 Title formatting: uppercase, capitalize, none

⚙️ Usage

import React from 'react';
import { Text } from 'react-native';
import { GripButton } from 'react-native-grip-button';

const MyScreen = () => {
  return (
    <GripButton
      title="Delete"
      variant="dashed"
      colorType="error"
      icon={<Text>🗑️</Text>}
      animationType="scale"
      titleCase="capitalize"
      shape="pill"
      onPress={() => alert('Deleted!')}
    />
  );
};

📋 Props

Parameter Type Description
title string The text label of the button.
onPress () => void Function to call on button press.
variant 'solid' \ 'outline' \ 'clear' \ 'dashed' \ 'ghost' \ 'link' \ 'elevated' \ 'glass' Style variant of the button.
colorType 'info' \ 'success' \ 'error' \ 'warning' Button color scheme.
size 'small' \ 'medium' \ 'large' Controls button size.
shape 'rounded' \ 'pill' \ 'square' Border radius styling.
icon ReactNode Optional icon inside the button.
iconPosition 'left' \ 'right' Icon placement relative to title.
disabled boolean Disable interaction.
loading boolean Show loading spinner instead of title.
titleCase 'uppercase' \ 'capitalize' \ 'none' Case style of the title text.
animationType 'scale' \ 'punch' \ 'none' Press animation variant.
debounced boolean Prevents rapid re-pressing.
ripple boolean Enables ripple effect on Android.
style ViewStyle Custom style for the button container.
textStyle TextStyle Custom style for the text.
loaderColor string Custom color for loading spinner.
borderAnimation boolean Adds animated glowing border around button.

🙋‍♂️ Author

Developed by ❤️ by Arsil Malek