Progressive Blur Card

1import React from 'react';
2import {
3    StyleSheet,
4    View,
5    Text,
6    Image,
7    TouchableOpacity,
8    Dimensions,
9    ImageSourcePropType,
10} from 'react-native';
11import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons';
12import { LinearGradient } from 'expo-linear-gradient';
13
14const { width } = Dimensions.get('window');
15
16interface ProfileCardProps {
17    name?: string;
18    bio?: string;
19    category?: string;
20    rating?: string;

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import ProfileCard from './components/ProgressiveBlur';

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <ProfileCard
                image={{ uri: 'https://images.unsplash.com/photo-1617939532603-2905b4eeb788?q=80&w=686&auto=format&fit=crop' }}
                onPress={() => console.log('Button Pressed')}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F0F4F8',
        justifyContent: 'center',