Hero Button
A versatile hero button with multiple themes including glass, brutalist, and gradient. Features shimmer and glow animations.
Component Features and Props
How to Use Hero Button Component
Installation Guide for Hero Button
Props
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | - | Button label text |
| onPress | () => void | - | Function to call on press |
| theme | 'glass' | 'brutal' | 'gradient' | 'dark' | 'minimal' | gradient | Visual theme of the button |
| loading | boolean | false | Show loading spinner |
| accentColor | string | #6366f1 | Primary color for gradients/borders |
| style | ViewStyle | - | Custom container styles |
| textStyle | TextStyle | - | Custom text styles |
Install
TERMINAL
$ npx expo install react-native-reanimated expo-blur expo-linear-gradientComponent Code
Component.tsx
1import React, { useEffect } from 'react';
2import { StyleSheet, Text, Pressable, View, ViewStyle, TextStyle, ActivityIndicator } from 'react-native';
3import Animated, {
4 useAnimatedStyle,
5 useSharedValue,
6 withRepeat,
7 withTiming,
8 withSpring,
9 Easing,
10 interpolate,
11} from 'react-native-reanimated';
12import { BlurView } from 'expo-blur';
13import { LinearGradient } from 'expo-linear-gradient';
14
15type HeroTheme = 'glass' | 'brutal' | 'gradient' | 'dark' | 'minimal';
16
17interface HeroButtonProps {
18 label: string;
19 onPress?: () => void;
20 theme?: HeroTheme;Usage
Usage.tsx
import React, { useState } from 'react';
import { StyleSheet, View, Text, ImageBackground, SafeAreaView, ScrollView } from 'react-native';
import HeroButton from './components/HeroButton';
export default function App() {
const [loading, setLoading] = useState(false);
const triggerAction = () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
};
return (
<ImageBackground
source={{ uri: 'https://images.unsplash.com/photo-1768467040818-3594e3f7ef4f?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }}
style={styles.container}
>
<SafeAreaView style={{ flex: 1 }}>
<ScrollView contentContainerStyle={styles.scroll}>
100%
Interactive Preview running on Expo Web.
Gestures and animations are simulated.
100%