دليل Reanimated 4 الكامل: رسوم CSS المتحركة في React Native (2026)

آخر تحديث: 25 يوليو 2026

Reanimated 4 هو الإصدار الرئيسي الجديد من مكتبة الرسوم المتحركة الأكثر استخداماً في React Native، ويُقدّم لأول مرة دعماً كاملاً لصيغة CSS للرسوم المتحركة والانتقالات، مع اعتماد كلي على البنية الجديدة (Fabric). إذا سبق واستخدمت Reanimated 3، فالإصدار الرابع لا يستبدله بل يوسّعه: تحصل الآن على واجهة CSS مألوفة للحالات البسيطة، وتحتفظ بـ Worklets وuseAnimatedStyle للحالات المعقدة. سأشرح في هذا الدليل كل ما تحتاجه لبدء الاستخدام أو الترقية في 2026، بما في ذلك المطبّات التي وقعت فيها بنفسي.

• Reanimated 4 يشترط تفعيل البنية الجديدة (New Architecture / Fabric)، ولا يعمل على البنية القديمة إطلاقاً.
• الميزة الرئيسية هي دعم صيغة CSS مباشرة عبر خاصية animation وtransition داخل كائنات الأنماط في React Native.
• Worklets وuseAnimatedStyle وuseSharedValue تظل موجودة وتعمل كما في الإصدار 3، لكن تحت غطاء محرّك جديد أكثر كفاءة.
• الترقية من Reanimated 3 إلى 4 لا تتطلب إعادة كتابة الشيفرة، لكنها تتطلب التحقق من تفعيل New Architecture ومن توافق المكتبات المصاحبة مثل react-native-gesture-handler.
• الأداء المستهدف في الإصدار الجديد هو 120fps على الأجهزة الحديثة، بفضل تنفيذ الرسوم مباشرة على خيط واجهة المستخدم دون المرور بجسر JavaScript.

ما هو Reanimated 4 وما الجديد فيه؟

Reanimated هي مكتبة تُنفّذ الرسوم المتحركة مباشرة على الخيط الأصلي (Native UI thread) بدلاً من خيط JavaScript، وهو ما يمنحك 60 إلى 120 إطاراً في الثانية حتى عندما يكون JS مشغولاً بمهام أخرى. الإصدار الرابع، الذي صدر رسمياً من فريق Software Mansion في منتصف 2025 ووصل إلى الاستقرار خلال 2026، يُعيد بناء الطبقة الداخلية للمكتبة بحيث تعتمد كلياً على مكوّنات البنية الجديدة، أي Fabric وTurbo Modules. النتيجة هي بدء تشغيل أسرع، ودعم كامل للتصيير المتزامن (Concurrent Rendering)، وواجهة مطوّر جديدة تعتمد صيغة CSS المعروفة.

بالنسبة لي كمهندس قاد فرقاً على ستة تطبيقات إنتاجية، أهم تحوّل عملي في الإصدار 4 هو أن الحالات البسيطة مثل تلاشي زر أو تحريك بطاقة يمكن التعبير عنها الآن بسطرين من CSS بدلاً من إنشاء useSharedValue وuseAnimatedStyle. هذا يُقلّل السطح الذي يمكن أن يظهر فيه خطأ، ويجعل الشيفرة أقرب لعقلية مطوّري الويب، مما يُسرّع مراجعة الشيفرة في الفرق المختلطة.

الجديد أيضاً هو دعم أفضل للـالرسوم المتحركة في React Native عبر الويب من خلال حزمة react-native-web، لأن نفس ملف CSS الذي تكتبه سيتم ترجمته على الويب إلى قواعد CSS حقيقية، مما يُنهي التكرار الذي كنّا نعانيه بين إصدار الجوّال والويب.

تثبيت Reanimated 4 والمتطلبات المسبقة

حسناً، قبل تثبيت الحزمة، تأكّد من ثلاث نقاط: أنت على React Native 0.78 أو أحدث، والبنية الجديدة مُفعّلة في مشروعك، وأنت تستخدم مُجمّع Hermes. Reanimated 4 لا يعمل على البنية القديمة ولا على JSC، وأي محاولة لتشغيله في هذه البيئات ستُلقي خطأً واضحاً عند الإقلاع. إذا كنت لا تزال تستخدم Expo، فأنت بحاجة إلى Expo SDK 54 على الأقل، ويُفضّل الإصدار 55 كما شرحت في دليل ترقية Expo SDK 55.

خطوات التثبيت لمشروع React Native خام:

# تثبيت الحزمة الأساسية
npm install react-native-reanimated@^4.0.0

# إعادة تثبيت الحزم الأصلية لنظام iOS
cd ios && pod install && cd ..

# تفعيل البنية الجديدة إذا لم تكن مفعّلة
# في ملف android/gradle.properties:
#   newArchEnabled=true
# في ملف ios/Podfile:
#   ENV['RCT_NEW_ARCH_ENABLED'] = '1'

بعد التثبيت، أضف مُكوِّن Babel في ملف babel.config.js. يجب أن يكون هذا الإضافة هي الأخيرة في مصفوفة plugins، لأن Reanimated يحوّل الشيفرة بعد كل المكوّنات الأخرى:

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    // ... plugins أخرى
    'react-native-worklets/plugin',
  ],
};

كيف تعمل رسوم CSS المتحركة في Reanimated 4؟

الميزة الأكبر في الإصدار الرابع هي أنك تستطيع كتابة الرسوم المتحركة داخل كائن StyleSheet مباشرة باستخدام خصائص animationName وanimationDuration وanimationTimingFunction، تماماً كما تفعل في CSS للويب. ولأول مرة، لا تحتاج إلى إنشاء useSharedValue ولا useAnimatedStyle للحالات البسيطة. مثال عملي لبطاقة تظهر بتلاشٍ وحركة صعود:

import Animated from 'react-native-reanimated';
import { StyleSheet } from 'react-native';

const fadeInUp = {
  from: { opacity: 0, transform: [{ translateY: 20 }] },
  to:   { opacity: 1, transform: [{ translateY: 0 }] },
};

export function Card({ children }) {
  return (
    <Animated.View style={styles.card}>
      {children}
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    backgroundColor: '#fff',
    borderRadius: 12,
    animationName: fadeInUp,
    animationDuration: 300,
    animationTimingFunction: 'ease-out',
    animationFillMode: 'forwards',
  },
});

القيمة الحقيقية تظهر عند الجمع بين قواعد متعددة. يمكنك تعريف keyframes بعدّة مراحل، تماماً كما في CSS:

const bounce = {
  '0%':   { transform: [{ translateY: 0 }] },
  '50%':  { transform: [{ translateY: -30 }] },
  '100%': { transform: [{ translateY: 0 }] },
};

const styles = StyleSheet.create({
  ball: {
    width: 40, height: 40, borderRadius: 20, backgroundColor: '#3b82f6',
    animationName: bounce,
    animationDuration: 800,
    animationIterationCount: 'infinite',
    animationTimingFunction: 'ease-in-out',
  },
});

الانتقالات (Transitions) تُعرَّف بنفس المنطق: تحدّد أي الخصائص يجب أن تُنعَّم عند تغيّر قيمتها. هذا يُشبه كثيراً واجهة CSS التي يعرفها مطوّرو الويب، وهو أحد الأسباب التي جعلت الفرق التي تعمل على تطبيقات هجينة تختار Reanimated 4 كخيار افتراضي في 2026.

الرسوم التخطيطية (Layout Animations) وانتقالات الدخول والخروج

الرسوم التخطيطية موجودة منذ Reanimated 2، لكنها في الإصدار 4 أصبحت أسرع وأكثر استقراراً لأنها تعتمد على Fabric لقياس التخطيط بدلاً من التحويلات اليدوية. تستطيع إضافة رسم دخول وخروج لأي مكوّن بسطر واحد:

import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';

function TodoItem({ item }) {
  return (
    <Animated.View
      entering={FadeIn.duration(250)}
      exiting={FadeOut.duration(150)}
      layout={Layout.springify()}
      style={styles.item}
    >
      <Text>{item.title}</Text>
    </Animated.View>
  );
}

عند إضافة عنصر جديد إلى القائمة، سيدخل بتلاشٍ. عند حذفه، سيخرج. وعند تغيّر ترتيب العناصر، سيتحرّك كل عنصر إلى موقعه الجديد تلقائياً بحركة spring. هذا الأسلوب الإعلاني (Declarative) يُغني عن الحاجة إلى مكتبات مثل LayoutAnimation القديمة أو الحسابات اليدوية.

الجديد في الإصدار 4 هو دعم Shared Element Transitions بشكل مستقر بعد أن كان تجريبياً في 3.x. تستطيع الآن ربط عنصر في شاشة بعنصر في شاشة أخرى عبر خاصية sharedTransitionTag، وستحدث الحركة تلقائياً عند التنقّل. هذا يتكامل بشكل ممتاز مع Expo Router كما ناقشت في دليل Expo Router v7 الكامل.

Worklets وخيط واجهة المستخدم في البنية الجديدة

Worklet هو دالة JavaScript صغيرة يتم تحويلها في وقت البناء لتعمل مباشرة على خيط واجهة المستخدم، بمعزل عن خيط JavaScript الرئيسي. هذه الآلية هي جوهر أداء Reanimated منذ الإصدار 2، وفي الإصدار 4 نُقلت إلى حزمة مستقلة (react-native-worklets) يمكن استخدامها الآن من مكتبات أخرى مثل react-native-gesture-handler. مثال بسيط لسحب بطاقة:

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

function DraggableCard() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((e) => {
      'worklet';
      translateX.value += e.changeX;
      translateY.value += e.changeY;
    })
    .onEnd(() => {
      'worklet';
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
    ],
  }));

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.card, animatedStyle]} />
    </GestureDetector>
  );
}

الشيفرة أعلاه لا تعبر جسر JavaScript إطلاقاً أثناء السحب: كل قيمة changeX تُعالَج على خيط UI وتُطبَّق فوراً على العرض عبر Fabric. هذا هو السبب في أن الأداء يبقى 120fps حتى إذا كان خيط JS مشغولاً بجلب بيانات من الشبكة أو معالجة JSON كبير.

الترقية من Reanimated 3 إلى 4 خطوة بخطوة

الخبر السار: معظم الشيفرة التي كتبتها لـ Reanimated 3 ستعمل دون تغيير في 4. الأمر الجوهري الذي يجب فعله هو تفعيل البنية الجديدة إذا لم تكن مفعّلة، ثم تحديث الحزم. في تجربتي مع تطبيقين هذا العام، أخذت الترقية بين ثلاث وخمس ساعات بما فيها اختبار الانحدار على iOS وAndroid (المفاجأة كانت أقل ألماً مما توقّعت).

1. تحقّق من متطلبات البنية الجديدة

قم بتشغيل تطبيقك مع newArchEnabled=true أولاً على Reanimated 3.x وأصلح أي أخطاء ناجمة عن مكتبات لم تُهاجر بعد (مثل بعض إصدارات react-native-svg). لا تُحدّث Reanimated قبل أن يعمل التطبيق بشكل مستقر على البنية الجديدة.

2. حدّث الحزم

npm install react-native-reanimated@^4.0.0 react-native-worklets@^0.5.0
cd ios && pod install && cd ..

3. حدّث ملف Babel

غيّر 'react-native-reanimated/plugin' إلى 'react-native-worklets/plugin' في babel.config.js. هذا هو التغيير الوحيد المطلوب في معظم المشاريع.

4. راجع تحذيرات وقت التشغيل

عند أول تشغيل، ستظهر تحذيرات في الطرفية لأي API مهجور (Deprecated). أشهرها هو useAnimatedGestureHandler الذي استُبدل بالكامل بواجهة Gesture من react-native-gesture-handler v3. لديك حتى الإصدار 5 من Reanimated قبل أن يُحذف نهائياً، لكنّي أوصي بالترحيل الآن.

الأداء وأفضل الممارسات في 2026

الأداء في Reanimated 4 ممتاز افتراضياً، لكن هناك خمس ممارسات ألتزم بها في كل مشروع أقوده:

1. استخدم رسوم CSS للحالات البسيطة، وworklets للتفاعل. إذا كانت الحركة لا تعتمد على مدخلات المستخدم، فـ CSS أسرع في الكتابة وأسهل في القراءة. احتفظ بـ useSharedValue للسحب والإيماءات فقط.
2. لا تُنفّذ عمليات ثقيلة داخل worklet. Worklet مصمّم للحسابات البسيطة (جمع، مقارنة، استيفاء خطّي). إذا احتجت لمنطق معقد، احسِبه على JS ومرّر النتيجة عبر runOnJS.
3. قِس قبل أن تُحسّن. استخدم React Native DevTools مع لسان "Profiler" أو Xcode Instruments لرصد إعادة التصيير غير الضرورية قبل تعديل الرسوم.
4. تجنّب رسم القوائم الطويلة ببطاقات متحركة. استخدم FlashList مع entering={FadeIn.delay(index * 30)} ولا تتجاوز 30 عنصراً مرئياً في وقت واحد.
5. راجع نسبة الإطارات في وضع الإطلاق (Release). Reanimated في وضع التطوير يعمل بأداء أبطأ بسبب فحوصات إضافية. لا تُقيّم أبداً بأداء وضع التطوير (وقعت في هذا الفخ في عرض تقديمي أمام مدير المنتج، ولن أنساه).

للحصول على أحدث تفاصيل الإصدار وسجل التغييرات، راجع التوثيق الرسمي لـ Reanimated من Software Mansion وصفحة إصدارات المشروع على GitHub.

الأسئلة الشائعة

هل يعمل Reanimated 4 بدون البنية الجديدة؟

لا. Reanimated 4 يشترط تفعيل New Architecture (Fabric) على iOS وAndroid. إذا كان مشروعك لا يستطيع الترقية بعد، فابقَ على Reanimated 3.x الذي سيستمر تلقّي إصلاحات الأمان لمدة عام آخر تقريباً.

ما الفرق بين Reanimated 3 و 4؟

الفروقات الرئيسية ثلاثة: دعم صيغة CSS الأصلية للرسوم المتحركة، فصل محرّك Worklets إلى حزمة مستقلة (react-native-worklets)، واعتماد كلي على البنية الجديدة. واجهة useSharedValue وuseAnimatedStyle لم تتغيّر تقريباً.

هل Reanimated 4 أسرع من Reanimated 3؟

نعم، خصوصاً في زمن الإقلاع وفي الرسوم التخطيطية. تحسّنت التقييمات الداخلية بنسبة 15-25% في زمن أول رسم متحرك بعد الإقلاع، وذلك بفضل الاستفادة من Fabric مباشرة بدلاً من الطبقات الوسيطة.

هل يمكن استخدام Reanimated 4 مع Expo؟

نعم، ابتداءً من Expo SDK 54 (ويُفضّل SDK 55). Expo Go لا يدعم Reanimated 4 لأنه يشترط بناء أصلي (Development Build). استخدم eas build لإنشاء بناء تطوير قبل التجربة.

هل رسوم CSS في Reanimated 4 تدعم الويب؟

نعم. عند استخدام react-native-web، تُترجَم قواعد animationName وanimationDuration إلى قواعد CSS حقيقية في المتصفّح، مما يوحّد شيفرة الرسوم بين الجوّال والويب دون الحاجة إلى فرع منفصل.