Animated button component for React Native
npm install @aargon-ui/buttonbash
npm install @aargon-ui/button
or
yarn add @aargon-ui/button
`
$3
Make sure you have the required peer dependencies installed:
`bash
npm install react react-native react-native-reanimated @expo/vector-icons
`
Quick Start
`tsx
import React from 'react';
import { View } from 'react-native';
import { AnimatedButton } from '@aargon-ui/button';
export default function App() {
return (
console.log('Pressed!')}>Click Me
);
}
`
Basic Usage
$3
`tsx
console.log('Pressed!')}>Click Me
`
$3
`tsx
console.log('Liked!')}>
Like
`
$3
`tsx
console.log('Loading...')}>
Loading...
`
Variants
$3
`tsx
Default
`
$3
`tsx
Solid
`
$3
`tsx
Outline
`
$3
`tsx
Ghost
`
$3
`tsx
Link
`
Sizes
`tsx
Small
Medium
Large
`
Animation Types
$3
`tsx
Spring
`
$3
`tsx
Timing
`
$3
`tsx
Bounce
`
Custom Styling
$3
`tsx
const customTheme = {
colors: {
background: '#3B82F6',
text: '#FFFFFF',
border: '#1D4ED8',
},
borderRadius: 12,
};
Custom Theme ;
`
$3
`tsx
With Shadow
`
Advanced Usage
$3
`tsx
Left Icon
Right Icon
`
$3
`tsx
Disabled
`
$3
`tsx
Full Width
`
API Reference
$3
| Prop | Type | Default | Description |
| --------------- | -------------------------------------------------------- | ----------- | -------------------------------------- |
| children | React.ReactNode | - | Content to display in the button |
| onPress | () => void | - | Function called when button is pressed |
| variant | "default" \| "solid" \| "outline" \| "ghost" \| "link" | "default" | Visual variant |
| size | "sm" \| "md" \| "lg" | "md" | Size of the button |
| animationType | "timing" \| "spring" \| "bounce" | "spring" | Type of animation |
| duration | number | 300 | Animation duration in milliseconds |
| icon | string | - | Icon name from @expo/vector-icons |
| iconPosition | "left" \| "right" | "left" | Position of the icon |
| loading | boolean | false | Whether the button is in loading state |
| disabled | boolean | false | Whether the button is disabled |
| fullWidth | boolean | false | Whether the button takes full width |
| theme | ButtonTheme | - | Custom theme object |
| shadow | boolean | false | Whether to show shadow effect |
$3
`tsx
interface ButtonTheme {
colors: {
background: string;
text: string;
border: string;
shadow: string;
};
borderRadius: number;
fontFamily?: string;
}
type ButtonVariant = 'default' | 'solid' | 'outline' | 'ghost' | 'link';
type ButtonSize = 'sm' | 'md' | 'lg';
type AnimationType = 'timing' | 'spring' | 'bounce';
`
Accessibility
The button component includes full accessibility support:
- ARIA attributes - Proper role and aria-label` attributes