import React, { useRef, useState } from 'react'; import { View, Text, Image, Dimensions, PanResponder, Animated, TouchableOpacity } from 'react-native'; import { Heart, X } from 'lucide-react-native'; const { width: screenWidth } = Dimensions.get('window'); // Sample profile data const profiles = [ { id: '1', name: 'Alex Morgan', age: 28, bio: 'Adventure seeker and coffee lover. Looking for someone to explore the world with.', image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', distance: '5 miles away', }, { id: '2', name: 'Taylor Swift', age: 33, bio: 'Musician and cat mom. Enjoy long walks and spontaneous road trips.', image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', distance: '2 miles away', }, { id: '3', name: 'Jordan Lee', age: 25, bio: 'Fitness enthusiast and foodie. Love trying new restaurants and hiking trails.', image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', distance: '8 miles away', }, { id: '4', name: 'Morgan Freeman', age: 30, bio: 'Bookworm and wine connoisseur. Looking for deep conversations and cozy nights in.', image: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80', distance: '3 miles away', }, { id: '5', name: 'Jamie Smith', age: 27, bio: 'Artist and traveler. Always looking for inspiration in new places and faces.', image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80', distance: '1 mile away', }, ]; export default function SwipeCards() { const [currentIndex, setCurrentIndex] = useState(0); const position = useRef(new Animated.ValueXY()).current; const currentIndexRef = useRef(currentIndex); // Update ref when currentIndex changes React.useEffect(() => { currentIndexRef.current = currentIndex; }, [currentIndex]); const panResponder = useRef( PanResponder.create({ onStartShouldSetPanResponder: () => true, onPanResponderMove: (_, gesture) => { position.setValue({ x: gesture.dx, y: gesture.dy }); }, onPanResponderRelease: (_, gesture) => { if (gesture.dx > 120) { // Swipe right - Like Animated.spring(position, { toValue: { x: screenWidth + 100, y: gesture.dy }, useNativeDriver: true, }).start(() => { setCurrentIndex(prev => prev + 1); position.setValue({ x: 0, y: 0 }); }); } else if (gesture.dx < -120) { // Swipe left - Pass Animated.spring(position, { toValue: { x: -screenWidth - 100, y: gesture.dy }, useNativeDriver: true, }).start(() => { setCurrentIndex(prev => prev + 1); position.setValue({ x: 0, y: 0 }); }); } else { // Return to center Animated.spring(position, { toValue: { x: 0, y: 0 }, friction: 4, useNativeDriver: true, }).start(); } }, }) ).current; const rotate = position.x.interpolate({ inputRange: [-screenWidth/2, 0, screenWidth/2], outputRange: ['-10deg', '0deg', '10deg'], extrapolate: 'clamp' }); const nextCardOpacity = position.x.interpolate({ inputRange: [-screenWidth/2, 0, screenWidth/2], outputRange: [1, 0.7, 1], extrapolate: 'clamp' }); const nextCardScale = position.x.interpolate({ inputRange: [-screenWidth/2, 0, screenWidth/2], outputRange: [1, 0.9, 1], extrapolate: 'clamp' }); const handleLike = () => { Animated.spring(position, { toValue: { x: screenWidth + 100, y: 0 }, useNativeDriver: true, }).start(() => { setCurrentIndex(prev => prev + 1); position.setValue({ x: 0, y: 0 }); }); }; const handlePass = () => { Animated.spring(position, { toValue: { x: -screenWidth - 100, y: 0 }, useNativeDriver: true, }).start(() => { setCurrentIndex(prev => prev + 1); position.setValue({ x: 0, y: 0 }); }); }; const renderProfiles = () => { return profiles.map((profile, index) => { if (index < currentIndex) return null; if (index === currentIndex) { return ( {profile.name} {profile.age} {profile.distance} {profile.bio} ); } else { // Next card in the stack return ( {profile.name} {profile.age} {profile.distance} {profile.bio} ); } }); }; return ( {/* Header */} Discover {/* Cards container */} {profiles.length > 0 ? ( renderProfiles() ) : ( No more profiles Check back later for new matches )} {/* Action buttons */} ); }

React Native SwipeMatch App Preview

Project Screens for SwipeMatch App