الإدخال TextInput والحالة useState

import { useState } from 'react';import { View, Text, TextInput, StyleSheet } from 'react-native'; export default function App() {  const [name, setName] = useState('');  return (    <View style={{ padding: 20 }}>      <TextInput        style={styles.input}        placeholder="اكتب اسمك"        value={name}        onChangeText={setName}      />      <Text style={styles.greet}>        {name ? 'مرحبًا يا ' + name + ' 👋' : 'الحقل فارغ'}      </Text>    </View>  );} const styles = StyleSheet.create({  input: { borderWidth: 1, borderColor: '#E8820C', borderRadius: 10, padding: 10, fontSize: 16 },  greet: { marginTop: 12, fontSize: 18 },});

import { useState } from 'react';import { View, Text, TextInput, StyleSheet } from 'react-native'; export default function App() {  const [price, setPrice] = useState('');  const num = Number(price) || 0;  const withVat = (num * 1.15).toFixed(2);  return (    <View style={{ padding: 20 }}>      <TextInput        style={styles.input}        placeholder="السعر قبل الضريبة"        keyboardType="numeric"        value={price}        onChangeText={setPrice}      />      <Text style={styles.out}>السعر مع الضريبة (15%): {withVat} ر.س</Text>    </View>  );} const styles = StyleSheet.create({  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 10 },  out: { marginTop: 12, fontSize: 16, fontWeight: 'bold', color: '#2E7D32' },});

import { useState } from 'react';import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native'; export default function App() {  const [text, setText] = useState('');  const [items, setItems] = useState([]);  function add() {    if (!text.trim()) return;    setItems([...items, text.trim()]);    setText('');  }  return (    <View style={{ padding: 16 }}>      <View style={{ flexDirection: 'row', gap: 8 }}>        <TextInput style={styles.input} placeholder="عنصر جديد" value={text} onChangeText={setText} />        <Pressable style={styles.btn} onPress={add}><Text style={styles.bt}>إضافة</Text></Pressable>      </View>      {items.map((it, i) => <Text key={i} style={styles.row}>• {it}</Text>)}    </View>  );} const styles = StyleSheet.create({  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 8 },  btn: { backgroundColor: '#E8820C', borderRadius: 8, justifyContent: 'center', paddingHorizontal: 14 },  bt: { color: 'white' },  row: { paddingVertical: 6, fontSize: 15 },});