مكوّنات قابلة لإعادة الاستخدام: props

import { View, Text, StyleSheet } from 'react-native'; function ProductCard({ name, price }) {   // props: name و price  return (    <View style={styles.card}>      <Text style={styles.name}>{name}</Text>      <Text style={styles.price}>{price} ر.س</Text>    </View>  );} export default function App() {  return (    <View style={{ padding: 10, gap: 8 }}>      <ProductCard name="قهوة مختصة" price={24} />      <ProductCard name="شاي أخضر" price={14} />      <ProductCard name="عصير برتقال" price={16} />    </View>  );} const styles = StyleSheet.create({  card: { backgroundColor: '#FFF3E0', padding: 14, borderRadius: 12, flexDirection: 'row', justifyContent: 'space-between' },  name: { fontSize: 16, fontWeight: 'bold' },  price: { color: '#E8820C', fontWeight: 'bold' },});

import { View, Text, StyleSheet } from 'react-native'; function Badge({ label, color = '#2E7D32' }) {  return <Text style={[styles.badge, { backgroundColor: color }]}>{label}</Text>;} function Item({ name, isNew }) {  return (    <View style={styles.row}>      <Text style={styles.name}>{name}</Text>      {isNew && <Badge label="جديد" />}    </View>  );} export default function App() {  return (    <View style={{ padding: 12, gap: 8 }}>      <Item name="سمّاعات" isNew={true} />      <Item name="غطاء هاتف" isNew={false} />    </View>  );} const styles = StyleSheet.create({  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },  name: { fontSize: 16 },  badge: { color: 'white', paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden', fontSize: 12 },});

import { View, Text, StyleSheet } from 'react-native'; function Card({ title, children }) {  return (    <View style={styles.card}>      <Text style={styles.title}>{title}</Text>      {children}    </View>  );} export default function App() {  return (    <Card title="الملف الشخصيّ">      <Text>الاسم: نورة</Text>      <Text>المدينة: الرياض</Text>    </Card>  );} const styles = StyleSheet.create({  card: { margin: 12, padding: 14, borderRadius: 12, borderWidth: 1, borderColor: '#E8820C' },  title: { fontWeight: 'bold', fontSize: 17, marginBottom: 8, color: '#E8820C' },});