Progressive Blur Card

Profile card featuring a seamless gradient fade (progressive blur) from image to content.

Props

Property	Type	Default	Description
name	string	-	User name
bio	string	-	User bio
category	string	-	Category label
rating	string	-	Rating string
imageREQUIRED	ImageSourcePropType	-	Cover image
onPress	() => void	-	Card press callback

Install

TERMINAL

$ npx expo install expo-linear-gradient expo-vector-icons

Component Code

Component.tsx

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;

Login to Access

Join Uilora for free to unlock full access to premium components.

Get Started

Usage

Usage.tsx

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',

Login to Access

Join Uilora for free to unlock full access to premium components.

Get Started

PrevProfile Follow Card

NextSmoky Focus Card

Related Components

Booking Card

Mobile Booking Card component for React Native

View

Premium Product Card

Mobile Premium Product Card component for React Native

View

Profile Stats Card

Mobile Profile Stats Card component for React Native

View

100%

Interactive Preview running on Expo Web.
Gestures and animations are simulated.

100%

Progressive Blur Card

Profile card featuring a seamless gradient fade (progressive blur) from image to content.

Props

Property	Type	Default	Description
name	string	-	User name
bio	string	-	User bio
category	string	-	Category label
rating	string	-	Rating string
imageREQUIRED	ImageSourcePropType	-	Cover image
onPress	() => void	-	Card press callback

Install

TERMINAL

$ npx expo install expo-linear-gradient expo-vector-icons

Component Code

Component.tsx

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;

Login to Access

Join Uilora for free to unlock full access to premium components.

Get Started

Usage

Usage.tsx

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',