Expo vs Bare React Native مقارنة

// Expo — إضافة إذن أصلي عبر app.config.ts + config plugin محلي (TypeScript)

// plugins/withCameraUsage.ts — config plugin يضيف إذن الكاميرا إلى Info.plist
import { ConfigPlugin, withInfoPlist } from "expo/config-plugins";

const withCameraUsage: ConfigPlugin = (config) =>
  withInfoPlist(config, (config) => {
    config.modResults.NSCameraUsageDescription =
      "الوصول إلى الكاميرا مطلوب لالتقاط صورة الملف الشخصي";
    return config;
  });

export default withCameraUsage;

// app.config.ts — يُشار إلى الـ plugin عبر مسار الملف (يتطلب npm i -D tsx)
import "tsx/cjs";
import { ExpoConfig, ConfigContext } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: "MyApp",
  slug: "my-app",
  version: "1.0.0",
  plugins: [["./plugins/withCameraUsage.ts"], "expo-router", "expo-updates"],
  updates: { url: "https://u.expo.dev/your-project-id" },
  runtimeVersion: { policy: "appVersion" },
});

// الطرفية: توليد المجلدات الأصلية (CNG) وتطبيقها
// npx expo prebuild --clean

// تشغيل EAS Build ونشر تحديث OTA
// eas build --platform all --profile production
// eas update --branch production --message "Bug fix: login crash"

// Bare React Native — تثبيت الحزمة + تهيئة أصلية يدوية (TypeScript)

// 1) ثبّت الحزمة: يربطها autolinking، اسحب الـ pods، أعد البناء
// $ npm install react-native-vision-camera react-native-nitro-modules react-native-nitro-image
// $ npx pod-install
// $ npm run ios     # Android: npm run android

// 2) أضف الأذونات يدويًا — هذه الخطوة غير مشمولة في autolinking
// ios/MyApp/Info.plist:
// <key>NSCameraUsageDescription</key>
// <string>الوصول إلى الكاميرا مطلوب لالتقاط صورة الملف الشخصي</string>
// android/app/src/main/AndroidManifest.xml:
// <uses-permission android:name="android.permission.CAMERA" />

// 3) الاستخدام في جانب JS (كود مشترك)
import React, { useEffect } from "react";
import { Camera, useCameraPermission } from "react-native-vision-camera";

function ProfileCamera() {
  const { hasPermission, requestPermission } = useCameraPermission();

  useEffect(() => {
    if (!hasPermission) requestPermission();
  }, [hasPermission, requestPermission]);

  return <Camera style={{ flex: 1 }} isActive={true} device="back" />;
}

export default ProfileCamera;

// 4) ترقية الإصدار (0.86 -> 0.87): لا يوجد أمر CLI لهذا
// Upgrade Helper (ويب): https://react-native-community.github.io/upgrade-helper/
// -> طبّق الفروقات (diff) يدويًا على Podfile.lock وbuild.gradle وAppDelegate.swift

// 5) خط أنابيب CI الخاص بك (GitHub Actions، ملخّص)
// - run: npx pod-install
// - run: xcodebuild -workspace ios/MyApp.xcworkspace -scheme MyApp -configuration Release