أطلقت تطبيق React Native — إليك ١٠ أشياء أحدثت فرقاً حقيقياً

أطلقت مؤخراً أحد تطبيقات React Native (تطبيق مالي/ميزانية، مبني على Expo) وأردت مشاركة بعض الأدوات والأساليب التي ساعدت فعلاً. ليست الأشياء الواضحة التي يعرفها الجميع، بل أشياء تمنيت لو أخبرني بها أحد مبكراً.

١. react-native-keyboard-controller بدلاً من KeyboardAvoidingView إذا سبق وعانيت مع KeyboardAvoidingView المدمج، تخلص منه. هذه المكتبة تتعامل مع سلوك لوحة المفاتيح بشكل صحيح على كلا المنصتين. غلّف تطبيقك بـ وانسَ الموضوع. تدعم أيضاً إخفاء لوحة المفاتيح التفاعلي (المستخدم يسحب لوحة المفاتيح للأسفل) مما يعطي شعوراً أصلياً.

٢. react-native-draggable-flatlist مع ScaleDecorator احتجت أن يتمكن المستخدمون من إعادة ترتيب حساباتهم وميزانياتهم بالسحب. هذه المكتبة هي أساساً FlatList لكن قابلة للسحب. اللمسة الجميلة هي تغليف كل عنصر بـ ، تعطي تلك الحركة المُرضية للتكبير عند الإمساك بالعنصر. تبدو احترافية بدون أي جهد.

٣. expo-speech-recognition للإدخال الصوتي أردت أن يتمكن المستخدمون من إضافة المعاملات بالصوت ("صرفت ٥٠ على القهوة"). هذه الحزمة جعلتها بسيطة جداً، سطر واحد للبدء، تدعم لغات متعددة، وتعطيك نتائج مؤقتة في الوقت الفعلي. لا حاجة للتعامل مع وحدات أصلية أو واجهات برمجة خارجية لتحويل الكلام لنص.

٤. expo-glass-effect لـ Liquid Glass في iOS 26 إذا كنت على Expo SDK 54، يمكنك استخدام isLiquidGlassAvailable() للتحقق مما إذا كان الجهاز يدعم liquid glass وعرض التبويبات الأصلية مشروطاً مقابل شريط التبويب الكلاسيكي مع BlurView. تطبيقك يبدو عصرياً على الأجهزة الجديدة ويعمل بشكل جيد على القديمة.

٥. babel-plugin-react-compiler لا يزال في مرحلة بيتا لكنه قابل للاستخدام. يقوم بعمل memoize تلقائي لمكوناتك وhooks عند البناء. كنت أكتب useMemo و useCallback يدوياً في كل مكان، الآن المترجم يتعامل مع معظمها. فقط أضفه لإعدادات babel واتركه يعمل.

٦. مسح الإيصالات مع Gemini Vision API هذه كانت ممتعة. المستخدم يلتقط صورة لإيصال، أحوّلها لـ base64 وأرسلها لـ Gemini كبيانات صورة مضمّنة. الحيلة هي طلب استخراج عناصر فردية، ليس فقط المجموع. إيصال بقالة يصبح ٥ معاملات منفصلة، كل واحدة مصنّفة تلقائياً من قائمة فئات المستخدم. هندسة الـ prompt مهمة جداً هنا، يجب أن تكون محدداً جداً بشأن تنسيق المخرجات وإلا الذكاء الاصطناعي يبدع.

٧. Lottie للتفاعلات الصغيرة، ليس فقط الأونبوردينج الكل يستخدم Lottie لشاشات البداية والأونبوردينج. أنا استخدمتها لإيموجي مزاج صغيرة على المعاملات، كل مزاج (سعيد، متوتر، محايد...) له رسوم Lottie صغيرة ١٨×١٨ متكررة. أكثر حيوية بكثير من إيموجي ثابتة. المفتاح هو الحفاظ على ملفات JSON صغيرة واستخدام autoPlay loop.

٨. @shopify/react-native-skia للتدرجات المتحركة أردت خلفية تدرج متحركة (مثل التي تراها في تطبيقات التكنولوجيا المالية الحديثة). استخدمت دعم shader في Skia لكتابة تدرج mesh مخصص بـ GLSL يتحرك على خيط UI. حيلة الأداء هي تقليل الدقة، عرض الشيدر بنصف الدقة وتكبيره. المستخدمون لا يلاحظون الفرق وتوفر الكثير من عمل GPU.

٩. expo-haptics، لكن استخدم نوع التغذية الراجعة الصحيح لا تستخدم نمط اهتزاز واحد في كل مكان. هناك أنواع مختلفة لسبب: - selectionAsync() للمفاتيح والفلاتر (نقرة خفيفة) - impactAsync(Medium) لضغطات الأزرار - impactAsync(Heavy) للإجراءات التدميرية أو الضغط المطوّل - notificationAsync(Success) للتأكيدات

تفصيل صغير لكن المستخدمين يلاحظونه لا شعورياً. يجعل التطبيق كله يبدو أكثر "واقعية".

١٠. رسوم متحركة سلسة للأرقام مع useAnimatedReaction من Reanimated لأشياء مثل إجماليات الأرصدة أو قيم الرسوم البيانية، أحرّك العدد صعوداً/نزولاً بدلاً من القفز مباشرة للقيمة الجديدة. الحيلة هي استخدام useAnimatedReaction لمراقبة قيمة مشتركة على خيط UI ودفع التحديثات لـ JS عبر runOnJS. تحصل على تأثير عد سلس ٦٠ إطار بالثانية بدون إعادة عرض مكونك في كل إطار. يعمل رائعاً لأي عرض رقمي.

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