بناء أول تطبيق React Native: دليل خطوة بخطوة

npx create-expo-app my-app
cd my-app
npx expo start

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>أهلاً بك</Text>
      <Text style={styles.subtitle}>أول تطبيق React Native</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 28, fontWeight: 'bold' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 8 },
});

<View
  style={{
    padding: 16,
    borderRadius: 12,
    backgroundColor: '#eef',
  }}
>
  <Text style={{ fontSize: 18, fontWeight: 'bold' }}>عنوان</Text>
</View>

import { useState } from 'react';
import { View, Text, TextInput, Pressable, Alert } from 'react-native';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  async function handleLogin() {
    if (!email.includes('@')) {
      Alert.alert('خطأ', 'بريد إلكتروني غير صالح');
      return;
    }
    // منطق تسجيل الدخول...
    Alert.alert('نجح', 'مرحباً ' + email);
  }

  return (
    <View style={{ padding: 20, gap: 12 }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>تسجيل الدخول</Text>
      <TextInput
        placeholder="البريد"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={{ borderWidth: 1, borderRadius: 8, padding: 10 }}
      />
      <TextInput
        placeholder="كلمة السر"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ borderWidth: 1, borderRadius: 8, padding: 10 }}
      />
      <Pressable
        onPress={handleLogin}
        style={{ backgroundColor: '#6366f1', padding: 12, borderRadius: 8 }}
      >
        <Text style={{ color: 'white', textAlign: 'center' }}>دخول</Text>
      </Pressable>
    </View>
  );
}

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// داخل الشاشة
function HomeScreen({ navigation }) {
  return (
    <Pressable onPress={() => navigation.navigate('Details', { id: 42 })}>
      <Text>انتقل للتفاصيل</Text>
    </Pressable>
  );
}

import { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';

export default function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then(r => r.json())
      .then(data => {
        setPosts(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <Text>جارٍ التحميل...</Text>;

  return (
    <FlatList
      data={posts}
      keyExtractor={(item) => String(item.id)}
      renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1 }}>
          <Text style={{ fontWeight: 'bold' }}>{item.title}</Text>
          <Text style={{ marginTop: 4 }}>{item.body}</Text>
        </View>
      )}
    />
  );
}