تطبيق مهام React Native — تحدي TypeScript

تطبيق مهام React Native: addTodo يضيف مهمة إلى نسخة جديدة من todos عبر setTodos (بعد trim ويتجاهل النص الفارغ) ثم يفرّغ الحقل بـ setInputText، و toggleTodo يعكس completed، و deleteTodo يحذف المهمة، والعرض عبر FlatList مع keyExtractor.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';

interface Todo {
  id: string;
  text: string;
  completed: boolean;
}

export default function TodoApp() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [inputText, setInputText] = useState('');

  const addTodo = () => {
    // أضف مهمة جديدة
  };

  const toggleTodo = (id: string) => {
    // بدّل حالة المهمة
  };

  const deleteTodo = (id: string) => {
    // احذف المهمة
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>📝 مهامي</Text>
      {/* أكمل الكود */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
});

حل هذا التحدي يرتبط بفتح دورة «React Native المتقدم» بحسابك.