Overview

​

Available Button Types

​

Base Buttons

• Button - Standard button component with haptic feedback
• PressableOpacity - Base pressable component with opacity animation

​

Animated Buttons

• RainbowButton - Button with rotating gradient border
• RainbowButton2 - Enhanced gradient border button
• RainbowButton3 - Full gradient background button
• RippleButton - Material Design ripple effect button
• ShinyButton - Button with shine animation effect

​

Selection Buttons

• RadioButton - Animated radio selection button
• LanguageButton - Language selection button with flags

​

Installation

npm install react-native-reanimated expo-linear-gradient expo-haptics @expo/vector-icons react-native-gesture-handler

​

Common Features

• Haptic feedback support
• Theme integration (light/dark mode)
• Accessibility support
• Cross-platform compatibility
• Customizable styles and animations
• Loading and disabled states

​

Usage Example

import { Button, RainbowButton, RippleButton } from '@/components/common/buttons';
function ButtonExample() {
    return (
            <>
            <Button onPress={() => console.log('Pressed')}>
                Basic Button
            </Button>
            <RainbowButton
                onPress={() => console.log('Pressed')}
                colors={['#1DB954', '#00ff4e']}
            >
                Gradient Button
            </RainbowButton>
            <RippleButton
                onPress={() => console.log('Pressed')}
                color="#1DB954"
            >
                Ripple Effect
            </RippleButton>
        </>
    );
}

​

Best Practices

1. Choose the appropriate button type for your use case
2. Maintain consistent styling across your application
3. Always handle loading and error states
4. Provide proper feedback for user interactions
5. Ensure accessibility compliance