import React from 'react'; import { View, StyleSheet, Dimensions } from 'react-native'; import Animated, { useSharedValue, useAnimatedStyle, withSpring, withTiming, runOnJS, } from 'react-native-reanimated'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; const { width: SCREEN_WIDTH } = Dimensions.get('window'); const CARD_WIDTH = SCREEN_WIDTH * 0.8; const CARD_HEIGHT = CARD_WIDTH * 1.4; type CardProps = { suit: string; value: string; color: string; index: number; onSwipeComplete: () => void; zIndex: number; }; const Card: React.FC = ({ suit, value, color, index, onSwipeComplete, zIndex, }) => { const translateX = useSharedValue(0); const translateY = useSharedValue(0); const rotateZ = useSharedValue(0); const scale = useSharedValue(1); const panGesture = Gesture.Pan() .onUpdate((event) => { translateX.value = event.translationX; translateY.value = event.translationY; rotateZ.value = event.translationX / 20; }) .onEnd((event) => { if (Math.abs(event.translationX) > SCREEN_WIDTH / 3) { translateX.value = withTiming( event.translationX > 0 ? SCREEN_WIDTH : -SCREEN_WIDTH, { duration: 300 }, () => { runOnJS(onSwipeComplete)(); } ); translateY.value = withTiming(0, { duration: 300 }); rotateZ.value = withTiming(0, { duration: 300 }); } else { translateX.value = withSpring(0, { damping: 10 }); translateY.value = withSpring(0, { damping: 10 }); rotateZ.value = withSpring(0, { damping: 10 }); } }); const animatedStyle = useAnimatedStyle(() => ({ transform: [ { translateX: translateX.value }, { translateY: translateY.value }, { rotateZ: `${rotateZ.value}deg` }, { scale: scale.value }, ], zIndex, })); return ( {value} {suit} {suit} {value} {suit} ); }; const styles = StyleSheet.create({ card: { width: CARD_WIDTH, height: CARD_HEIGHT, backgroundColor: 'white', borderRadius: 16, position: 'absolute', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, cardContent: { flex: 1, padding: 16, }, cardCorner: { position: 'absolute', width: 40, alignItems: 'center', }, topLeft: { top: 8, left: 8, }, bottomRight: { bottom: 8, right: 8, transform: [{ rotate: '180deg' }], }, cardValue: { fontSize: 20, fontWeight: 'bold', }, cardSuit: { fontSize: 16, }, cardCenter: { flex: 1, justifyContent: 'center', alignItems: 'center', }, cardSuitLarge: { fontSize: 60, }, }); export default Card; export interface CardData { suit: string; value: string; color: string; } export const createDeck = (): CardData[] => { const suits = ['♥', '♦', '♠', '♣']; const values = [ 'A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', ]; const deck: CardData[] = []; suits.forEach((suit) => { const color = suit === '♥' || suit === '♦' ? 'red' : 'black'; values.forEach((value) => { deck.push({ suit, value, color }); }); }); return deck; }; export const shuffleDeck = (deck: CardData[]): CardData[] => { const shuffled = [...deck]; for (let i = shuffled.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } return shuffled; }; import React from 'react'; import { TouchableOpacity, Text, StyleSheet } from 'react-native'; interface ResetButtonProps { onPress: () => void; disabled: boolean; } const ResetButton: React.FC = ({ onPress, disabled }) => { return ( Reset Deck ); }; const styles = StyleSheet.create({ button: { backgroundColor: '#3f51b5', paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8, marginTop: 20, alignSelf: 'center', }, disabledButton: { backgroundColor: '#cccccc', }, buttonText: { color: 'white', fontSize: 16, fontWeight: 'bold', }, }); export default ResetButton; import React, { useState } from 'react'; import { View, StyleSheet, Text, SafeAreaView, StatusBar } from 'react-native'; import Card from './src/components/Card'; import { createDeck, shuffleDeck, CardData } from './src/utils/cards'; import ResetButton from './src/components/ResetButton'; const App = () => { const [deck, setDeck] = useState(shuffleDeck(createDeck())); const [currentIndex, setCurrentIndex] = useState(0); const handleSwipeComplete = () => { setCurrentIndex((prevIndex) => prevIndex + 1); }; const resetDeck = () => { setDeck(shuffleDeck(createDeck())); setCurrentIndex(0); }; return ( Card Deck {currentIndex} / {deck.length} {deck.slice(currentIndex, currentIndex + 3).map((card, index) => ( ))} ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', }, header: { padding: 16, alignItems: 'center', }, headerText: { fontSize: 24, fontWeight: 'bold', color: '#333', }, counterText: { fontSize: 16, color: '#666', marginTop: 4, }, cardContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, }); export default App; { "name": "react-native-card-deck", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~48.0.18", "expo-status-bar": "~1.4.4", "react": "18.2.0", "react-native": "0.71.8", "react-native-gesture-handler": "~2.9.0", "react-native-reanimated": "~3.0.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.0.24", "@types/react-native": "~0.71.0", "typescript": "~4.9.0" }, "private": true } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'], }; }; { "compilerOptions": { "allowSyntheticDefaultImports": true, "jsx": "react-native", "lib": ["dom", "esnext"], "moduleResolution": "node", "noEmit": true, "skipLibCheck": true, "resolveJsonModule": true, "strict": true, "target": "esnext", "baseUrl": "./", "paths": { "@/*": ["./src/*"] } }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] } { "expo": { "name": "Card Deck", "slug": "card-deck", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" } }, "web": { "favicon": "./assets/favicon.png" } } }