Hero Button

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;

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