State و useState — أساسيات React Native

State في React Native

ما هو State؟

State هو البيانات التي يمكن أن تتغير في تطبيقك. عندما يتغير الـ State، يُعاد رسم المكون تلقائياً.

useState Hook

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

export default function Counter() {
  // [القيمة, دالة التغيير] = useState(القيمة الابتدائية)
  const [count, setCount] = useState(0);

  return (
    <View style={{ alignItems: 'center', padding: 20 }}>
      <Text style={{ fontSize: 48 }}>{count}</Text>
      
      <TouchableOpacity 
        onPress={() => setCount(count + 1)}
        style={{ backgroundColor: '#3b82f6', padding: 15, borderRadius: 10 }}
      >
        <Text style={{ color: '#fff' }}>زيادة</Text>
      </TouchableOpacity>
    </View>
  );
}

أنواع State مختلفة

1. State للنصوص

const [name, setName] = useState('');

<TextInput
  value={name}
  onChangeText={setName}
  placeholder="اسمك"
/>

2. State للقيم المنطقية

const [isVisible, setIsVisible] = useState(false);

<TouchableOpacity onPress={() => setIsVisible(!isVisible)}>
  <Text>{isVisible ? 'إخفاء' : 'إظهار'}</Text>
</TouchableOpacity>

{isVisible && <Text>محتوى مخفي</Text>}

3. State للمصفوفات

const [items, setItems] = useState([]);

const addItem = () => {
  setItems([...items, { id: Date.now(), text: 'عنصر جديد' }]);
};

const removeItem = (id) => {
  setItems(items.filter(item => item.id !== id));
};

4. State للكائنات

const [user, setUser] = useState({
  name: '',
  email: '',
  age: 0,
});

// تحديث خاصية واحدة
setUser({ ...user, name: 'أحمد' });

// تحديث عدة خصائص
setUser(prev => ({
  ...prev,
  name: 'أحمد',
  email: 'ahmed@email.com',
}));

مثال تطبيقي: قائمة مهام

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

export default function TodoList() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  const addTask = () => {
    if (task.trim()) {
      setTasks([
        ...tasks,
        { id: Date.now().toString(), text: task, done: false }
      ]);
      setTask('');
    }
  };

  const toggleTask = (id) => {
    setTasks(tasks.map(t => 
      t.id === id ? { ...t, done: !t.done } : t
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(t => t.id !== id));
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <View style={{ flexDirection: 'row', marginBottom: 20 }}>
        <TextInput
          value={task}
          onChangeText={setTask}
          placeholder="مهمة جديدة..."
          style={{ flex: 1, borderWidth: 1, padding: 10, borderRadius: 8 }}
        />
        <TouchableOpacity 
          onPress={addTask}
          style={{ backgroundColor: '#3b82f6', padding: 10, borderRadius: 8, marginLeft: 10 }}
        >
          <Text style={{ color: '#fff' }}>إضافة</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', padding: 15, backgroundColor: '#f5f5f5', marginBottom: 10, borderRadius: 8 }}>
            <TouchableOpacity onPress={() => toggleTask(item.id)}>
              <Text style={{ fontSize: 20 }}>{item.done ? '✅' : '⬜'}</Text>
            </TouchableOpacity>
            <Text style={{ flex: 1, marginLeft: 10, textDecorationLine: item.done ? 'line-through' : 'none' }}>
              {item.text}
            </Text>
            <TouchableOpacity onPress={() => deleteTask(item.id)}>
              <Text style={{ color: 'red' }}>حذف</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </View>
  );
}