Untitled
unknown
plain_text
17 days ago
2.7 kB
3
Indexable
import React from 'react'; import { View, Text, TouchableOpacity, StyleSheet, Image, ScrollView } from 'react-native'; import { useNavigation } from '@react-navigation/native'; const topics = [ { id: '1', title: 'Alphabets' }, { id: '2', title: 'Greetings' }, { id: '3', title: 'Family' }, { id: '4', title: 'Food' }, { id: '5', title: 'Animals' } ]; export default function PracticeScreen() { const navigation = useNavigation(); const handleStart = (mode, topic) => { navigation.navigate(mode, { topic }); }; return ( <ScrollView style={styles.container}> <Text style={styles.header}>Practice Page</Text> <View style={styles.iconRow}> <View style={styles.iconContainer}> <Image source={require('../assets/quiz.png')} style={styles.iconImage} /> <Text style={styles.iconText}>Quiz</Text> </View> <View style={styles.iconContainer}> <Image source={require('../assets/flashcards.png')} style={styles.iconImage} /> <Text style={styles.iconText}>Flashcards</Text> </View> </View> {topics.map(topic => ( <View key={topic.id} style={styles.topicSection}> <Text style={styles.topicTitle}>{topic.title}</Text> <TouchableOpacity style={styles.button} onPress={() => handleStart('QuizScreen', topic.title)}> <Text style={styles.buttonText}>Start Quiz</Text> </TouchableOpacity> <TouchableOpacity style={styles.button} onPress={() => handleStart('FlashcardScreen', topic.title)}> <Text style={styles.buttonText}>Start Flashcard</Text> </TouchableOpacity> </View> ))} </ScrollView> ); } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#fff' }, header: { fontSize: 26, fontWeight: 'bold', marginBottom: 20, textAlign: 'center' }, iconRow: { flexDirection: 'row', justifyContent: 'space-around', marginBottom: 30 }, iconContainer: { alignItems: 'center' }, iconImage: { width: 80, height: 80, marginBottom: 10 }, iconText: { fontSize: 18, fontWeight: '500' }, topicSection: { marginBottom: 30, alignItems: 'center' }, topicTitle: { fontSize: 22, fontWeight: 'bold', marginBottom: 10 }, button: { backgroundColor: '#222', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 12, marginVertical: 5 }, buttonText: { color: '#fff', fontSize: 16 } });
Editor is loading...
Leave a Comment