Profile Follow 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 { Feather } from '@expo/vector-icons';
12
13const { width } = Dimensions.get('window');
14
15interface ProfileCardProps {
16    mode?: 'detached' | 'immersive';
17    name?: string;
18    bio?: string;
19    followers?: string;
20    posts?: string;

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

const USER_IMG = { uri: 'https://plus.unsplash.com/premium_photo-1689551670902-19b441a6afde?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' };

export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <ScrollView contentContainerStyle={styles.scroll}>

                {/* DETACHED MODE (Left in image) */}
                <ProfileFollowCard
                    mode="detached"
                    image={USER_IMG}
                    onFollowPress={() => alert('Following!')}
                />

                {/* IMMERSIVE MODE (Right in image) */}
                <ProfileFollowCard