دليل ترقية Expo SDK 55: البنية الجديدة، Expo Router v7، وكل ما تحتاج معرفته

مقدمة: لماذا يستحق Expo SDK 55 كل هذا الاهتمام؟

في مطلع 2026، أطلق فريق Expo الإصدار SDK 55، وصراحةً — هذا ليس تحديثاً عادياً. نتحدّث هنا عن React Native 0.83 و React 19.2، مع إلغاء كامل لدعم البنية القديمة. نعم، البنية الجديدة أصبحت الخيار الوحيد، بلا رجعة.

سواء كان مشروعك قائماً من سنوات أو بدأته الأسبوع الماضي، فهذه التغييرات ستؤثر عليك بشكل مباشر. في هذا الدليل سنمرّ على كل شيء: خطوات الترقية، الميزات الجديدة مثل Expo Router v7 و Hermes v1، والحزم التي اختفت تماماً — مع أمثلة كود تطبيقية.

فلنبدأ.

ماذا يتضمّن Expo SDK 55 بالضبط؟

إليك صورة سريعة عن أهم ما جاء في هذا الإصدار:

• React Native 0.83 — مع دعم حصري للبنية الجديدة فقط
• React 19.2 — يشمل Concurrent Rendering و Suspense بشكل كامل
• Expo Router v7 — واجهة Stack API محدّثة، Native Tabs، و Toolbar جديد
• Hermes v1 (اختياري) — تحسينات أداء ملحوظة بفضل مترجم جديد
• تحديثات OTA أصغر بنسبة تصل إلى 75% بفضل Hermes bytecode diffing
• حزمة expo-brownfield الجديدة لدمج React Native في تطبيقات أصلية قائمة
• حذف حزمة expo-av نهائياً — البديل هو expo-audio و expo-video
• هيكل مجلدات جديد: /src/app بدلاً من /app
• الحد الأدنى: Android 7+ و iOS 15.1 فأعلى، مع Xcode 16.1+

البنية الجديدة: لم تعد اختيارية

هذا هو التغيير الأكبر والأهم. في SDK 54 كان بإمكانك اختيار البنية القديمة. الآن؟ انتهى الأمر.

تمت إزالة خيار newArchEnabled من app.json بالكامل في SDK 55. البنية الجديدة — المبنية على Fabric و TurboModules و JSI — هي الطريقة الوحيدة لتشغيل تطبيقات Expo.

لكن لماذا هذا أمر جيد؟

بصراحة، التحسينات التي تقدّمها البنية الجديدة تستحق هذا الانتقال:

• JSI (JavaScript Interface): يسمح لـ JavaScript بالتواصل مباشرة مع الكود الأصلي عبر C++ — بدون تسلسل JSON الذي كان يخنق الأداء في البنية القديمة
• Fabric: نظام عرض جديد يوفّر تحديثات UI أكثر سلاسة، تمرير أنعم، واستجابة أسرع بشكل ملحوظ
• TurboModules: تحميل كسول للوحدات الأصلية — الوحدة لا تُحمّل إلا عند الحاجة إليها فعلاً، وهذا يُسرّع وقت بدء التشغيل
• Codegen: يولّد روابط JSI تلقائياً مع ضمان Type Safety

الأرقام تتحدث عن نفسها: المطورون الأوائل سجّلوا تحسّناً في وقت التشغيل البارد بنسبة 43%، وزيادة في سرعة العرض بنسبة 39%، وانخفاضاً في استهلاك الذاكرة بين 20-30%. هذه ليست أرقاماً نظرية — الفرق محسوس فعلاً.

ماذا لو مشروعي لا يزال على البنية القديمة؟

إذا كنت تستخدم newArchEnabled: false في إعداداتك، فاعلم أن SDK 55 سيتجاهل هذا الخيار تماماً. الأفضل أن تحذفه من ملف الإعدادات لتجنب أي لبس. وإذا كنت فعلاً بحاجة للبنية القديمة لسبب قاهر، فابقَ على SDK 54 أو أقدم.

خطوات الترقية إلى SDK 55

حسناً، ننتقل للجزء العملي. اتبع هذه الخطوات بالترتيب:

الخطوة 1: تحديث الحزم

في مشاريع Expo المُدارة (Managed)، لا تحاول تحديث React Native يدوياً. استخدم أمر الترقية المدمج وهو يتكفّل بكل شيء:

npx expo upgrade

سيُحدّث هذا الأمر حزمة expo وجميع الاعتماديات المتوافقة دفعة واحدة.

الخطوة 2: التعامل مع المجلدات الأصلية

إذا كنت تستخدم Continuous Native Generation (وهو ما أنصح به بشدة):

# احذف المجلدات الأصلية — ستُعاد تلقائياً
rm -rf android ios

# أعد إنشاءها
npx expo prebuild

أما إذا كنت لا تستخدم CNG:

# حدّث Pods لمشاريع iOS
npx pod-install

# راجع التغييرات المطلوبة عبر React Native Upgrade Helper

الخطوة 3: تشخيص التوافق

بعد الترقية مباشرة، شغّل أداة Doctor:

npx expo-doctor

هذه الأداة تفحص اعتمادياتك وتُخبرك إن كانت هناك مكتبات غير متوافقة مع البنية الجديدة. لا تتخطّ هذه الخطوة — جرّبتها مرة وندمت لأنني اكتشفت مكتبة غير متوافقة بعد ساعات من التصحيح.

الخطوة 4: إزالة الإعدادات القديمة

احذف أي إشارة لـ newArchEnabled من app.json:

// app.json — قبل الترقية
{
  "expo": {
    "newArchEnabled": false  // ❌ أزل هذا السطر
  }
}

// app.json — بعد الترقية
{
  "expo": {
    // لا حاجة لأي إعداد متعلق بالبنية
  }
}

الحزم المحذوفة والتغييرات المؤثرة

وداعاً expo-av

حزمة expo-av اختفت نهائياً من SDK 55. إذا كنت تستخدمها (وأغلب المشاريع كانت تستخدمها)، فعليك الانتقال إلى:

• expo-audio: لكل ما يتعلق بتشغيل وتسجيل الصوت
• expo-video: لعرض وتشغيل الفيديو

الخبر السار: الواجهة الجديدة أنظف وأسهل استخداماً بكثير.

مثال: الانتقال من expo-av إلى expo-audio

الكود القديم مع expo-av:

import { Audio } from 'expo-av';

const { sound } = await Audio.Sound.createAsync(
  require('./audio.mp3')
);
await sound.playAsync();

الكود الجديد مع expo-audio:

import { useAudioPlayer } from 'expo-audio';

function MyComponent() {
  const player = useAudioPlayer(require('./audio.mp3'));

  const handlePlay = () => {
    player.play();
  };

  return ;
}

لاحظ كيف أن الكود الجديد أبسط بكثير — يعتمد على Hooks بدلاً من واجهة الكلاسات القديمة.

مثال: الانتقال من expo-av إلى expo-video

الكود القديم:

import { Video } from 'expo-av';

الكود الجديد:

import { VideoView, useVideoPlayer } from 'expo-video';

function MyVideoComponent() {
  const player = useVideoPlayer(
    'https://example.com/video.mp4',
    (player) => {
      player.loop = true;
    }
  );

  return (
    
  );
}

الميزة الإضافية هنا: دعم مدمج لـ Picture-in-Picture وملء الشاشة بدون إعدادات إضافية.

تغييرات expo-blur على Android

من SDK 55، يستخدم expo-blur واجهة RenderNode API على Android 12 فأعلى. هذا يعني أنك ستحتاج لتغليف المحتوى داخل <BlurTargetView>:

import { BlurView, BlurTargetView } from 'expo-blur';

function MyBlurComponent() {
  return (
    
      {/* المحتوى الذي سيُطبّق عليه التمويه */}
      
      
    
  );
}

تغيير بسيط لكنه قد يكسر الكود إن لم تنتبه له.

Expo Router v7: نقلة نوعية في التنقّل

بصراحة، Expo Router v7 هو الميزة التي أثارت حماسي أكثر من غيرها في SDK 55. مجموعة الإضافات هنا تجعل التنقّل في التطبيق يبدو أصلياً فعلاً وليس محاكاة.

واجهة Stack API المحدّثة

أصبح بإمكانك إضافة أزرار للهيدر وعناصر مخصصة بسهولة:

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    
       ,
        }}
      />
    
  );
}

Stack.Toolbar — شريط أدوات أصلي لـ iOS

مكوّن جديد يضيف شريط أدوات أصلي مع دعم تأثيرات Liquid Glass على iOS (وهي تبدو رائعة بالمناسبة):

import { Stack } from 'expo-router';
import { Button } from 'react-native';

export default function DetailsScreen() {
  return (
    <>
      {/* محتوى الشاشة */}
      
        
        
      
    
  );
}

ملاحظة مهمة: Stack.Toolbar مع placement="bottom" يجب استخدامه داخل مكوّنات الصفحات وليس التخطيطات.

Native Tabs — تبويبات أصلية حقيقية

بدل التبويبات المبنية بـ JavaScript، أصبح لديك تبويبات تستخدم مكوّنات النظام الأصلية مباشرة:

import { NativeTabs, Trigger } from 'expo-router/native-tabs';

export default function TabLayout() {
  return (
    
      
      
      
    
  );
}

يدعم SF Symbols على iOS، و Material Design على Android، و Material أو Lucide على الويب. التأثير البصري واضح خصوصاً على iOS مع Liquid Glass.

Apple Zoom Transitions

انتقالات مشتركة تفاعلية (Shared Element Transitions) تعمل بالإيماءات على منصات Apple:

import { Link } from 'expo-router';

function ProductCard({ product }) {
  return (
    
      
        
        {product.name}
      
    
  );
}

إذا كنت تبني تطبيق تجارة إلكترونية أو معرض صور، هذه الميزة ستُحدث فرقاً كبيراً في تجربة المستخدم.

Hermes v1: محرك JavaScript أسرع

SDK 55 يأتي مع خيار تفعيل Hermes v1 — إصدار جديد كلياً من المحرك بمترجم جديد وآلة افتراضية مُحسّنة.

ما الجديد في Hermes v1؟

• تحسينات أداء ملحوظة في أغلب سيناريوهات الاستخدام
• دعم أفضل لميزات JavaScript الحديثة مثل ES6 classes و const/let و async/await
• مترجم جديد بالكامل مع آلة افتراضية مُعاد بناؤها

كيف تفعّله؟

الأمر بسيط — أضف هذا الإعداد في app.json:

// app.json
{
  "expo": {
    "experiments": {
      "hermesEngine": "v1"
    }
  }
}

تنبيهات قبل التفعيل

هناك أمران يجب أن تعرفهما:

• قد يزداد وقت البناء لأن Hermes v1 يحتاج لبناء React Native من المصدر بدل استخدام ملفات مُترجمة مسبقاً
• إذا كنت تستخدم Monorepo مع Android، انتظر حتى يتم حل مشكلة معروفة قبل تفعيله

رأيي الشخصي: إذا كان تطبيقك يعتمد بشكل كبير على عمليات JavaScript مكثفة، فالتحسينات تستحق التجربة. وإلا، يمكنك الانتظار حتى يصبح أكثر نضجاً.

تحديثات OTA أصغر بنسبة 75%

هذه من الميزات التي قد لا تبدو مثيرة للوهلة الأولى، لكنها مؤثرة جداً في الواقع.

يدعم SDK 55 ميزة Hermes bytecode diffing في expo-updates و EAS Update. بدلاً من تنزيل ملف Hermes bytecode الكامل مع كل تحديث، يتم تنزيل التصحيحات الثنائية (binary patches) فقط وتطبيقها على الملفات الموجودة.

النتيجة: تقليص حجم التحديثات بنسبة تصل إلى 75%. هذا تحسّن ضخم خصوصاً للمستخدمين في مناطق ذات اتصالات بطيئة.

هيكل المجلدات الجديد

القالب الافتراضي الجديد في SDK 55 يضع كود التطبيق في /src/app بدلاً من /app:

my-app/
├── src/
│   └── app/
│       ├── _layout.tsx
│       ├── index.tsx
│       └── settings.tsx
├── app.json
├── package.json
└── tsconfig.json

الفكرة هي فصل كود التطبيق عن ملفات الإعداد بشكل أوضح. لكن لا تقلق — هذا للمشاريع الجديدة فقط. مشاريعك القائمة التي تستخدم /app ستعمل بدون أي مشاكل.

expo-brownfield: دعم التطبيقات الهجينة

إذا عندك تطبيق أصلي قائم (iOS أو Android) وتريد إضافة شاشات React Native إليه، فحزمة expo-brownfield الجديدة تُسهّل هذه العملية كثيراً.

الفكرة: تطوّر كود React Native بشكل منفصل، ثم تعبّئه كمكتبة أصلية:

• AAR لتطبيقات Android
• XCFramework لتطبيقات iOS

بعد ذلك، يستطيع مطورو الكود الأصلي استخدام هذه المكتبة بدون الحاجة لإعداد Node.js أو أي اعتماديات React Native. حل أنيق لفِرق التطوير المختلطة.

توحيد إصدارات الحزم

تفصيل صغير لكنه مريح: جميع حزم Expo أصبحت تستخدم نفس رقم الإصدار الرئيسي مع SDK. يعني expo-camera الآن ^55.0.0، وهكذا. بنظرة واحدة تعرف هل الحزمة متوافقة مع إصدار مشروعك أم لا.

أدوات الذكاء الاصطناعي: MCP و Agent Skills

من الإضافات اللافتة في SDK 55 دعم Model Context Protocol (MCP). أدوات مثل Claude Code أصبح بإمكانها قراءة دليل الترقية، تحليل كودك، تحديث الاعتماديات، وحتى تشغيل prebuild — كل ذلك بشكل آلي.

نشر فريق Expo أيضاً مهارات جاهزة في مكتبة expo/skills للمساعدة في المهام الشائعة، بما فيها الترقية التلقائية.

قائمة مراجعة سريعة للترقية

قبل أن تذهب وتبدأ بالترقية، تأكد من هذه النقاط:

1. شغّل npx expo upgrade لتحديث الحزم
2. أزل newArchEnabled من app.json
3. استبدل expo-av بـ expo-audio و expo-video
4. حدّث استخدام expo-blur مع BlurTargetView على Android
5. شغّل npx expo-doctor للتحقق من التوافق
6. احذف مجلدات android و ios وأعد إنشاءها (إذا كنت تستخدم CNG)
7. اختبر تطبيقك على كلا المنصتين — لا تتخطّ هذه الخطوة
8. جرّب تفعيل Hermes v1 اختيارياً إذا كنت مهتماً بالأداء

أسئلة شائعة

هل أستطيع البقاء على البنية القديمة مع SDK 55؟

للأسف لا. SDK 55 يدعم البنية الجديدة حصرياً — خيار newArchEnabled أُزيل بالكامل. إذا كنت مضطراً للبقاء على البنية القديمة، استخدم SDK 54. لكن انتبه أن مكتبات مثل Reanimated v4 و FlashList v4 أسقطت دعم البنية القديمة هي الأخرى.

ما الفرق العملي بين expo-audio و expo-av؟

expo-audio هي البديل المحسّن لوظائف الصوت. تعتمد على Hooks مثل useAudioPlayer و useAudioRecorder بدل واجهة الكلاسات القديمة. الأداء أفضل، والدعم كامل للبنية الجديدة. أما expo-av فلم تعد تتلقّى تحديثات وتم أرشفة كودها المصدري.

هل سيتأثر وقت البناء مع Hermes v1؟

نعم، قد يزداد وقت البناء لأن Hermes v1 يبني React Native من المصدر. لكن تحسينات الأداء أثناء التشغيل قد تبرّر هذه المقايضة، خصوصاً للتطبيقات التي تعتمد على عمليات JavaScript مكثفة.

هل يجب أن أنقل مشروعي من /app إلى /src/app؟

لا، هذا ليس ضرورياً. هيكل /src/app هو الافتراضي للمشاريع الجديدة فقط. مشاريعك القائمة تعمل بدون أي تعديل. إذا أردت الانتقال اختيارياً، انقل محتويات app إلى src/app وحدّث إعداد main في package.json.

متى سيصدر SDK 56؟

من المتوقع في الربع الثاني من 2026 (مايو أو يونيو تقريباً)، وسيتضمّن React Native 0.85. فريق Expo يواصل التركيز على تحسينات الأداء وأدوات التطوير.