‏Number Flow: انیمیشن نرم اعداد تو React Native

Number Flow React Native یه کتابخونه‌ست برای انیمیت کردن اعداد تو اپ‌های React Native. ایده‌ش اینه که وقتی یه عدد عوض می‌شه، به‌جای اینکه یهو بپره، هر رقمش جداگونه مثل یه چرخ مجازی می‌چرخه و خودش تشخیص می‌ده که باید رو به بالا بره یا پایین. به گفتهٔ سازنده، این نسخه یه پیاده‌سازی کامل از کتابخونهٔ وب NumberFlow ساختهٔ Max Barvian برای React Native ـه.

کتابخونه دوتا رندرر داره. رندرر پیش‌فرض روی View کار می‌کنه و هیچ وابستگی اضافه‌ای نمی‌خواد؛ ولی اگه بخوای اعداد رو داخل بوم Skia نشون بدی، یه رندرر مخصوص Skia هم هست که باهاش می‌تونی تا ۱۲۰ فریم بر ثانیه اسکراب کنی، چون آپدیت‌ها با worklet مستقیم رو ترد UI اجرا می‌شن.

یکی از نقطه‌قوت‌هاش پشتیبانی کامل از Intl.NumberFormat ـه؛ یعنی می‌تونی ارز، درصد، واحدها و نماد فشرده (compact) رو همون‌جوری که این فرمت‌کننده بلده نشون بدی. علاوه بر این، ۳۷ سیستم عددی مثل عربی-هندی، دیواناگری، تایلندی و CJK رو هم ساپورت می‌کنه.

یه بخش جدا به اسم TimeFlow هم داره که مخصوص نمایش انیمیشنی زمانه: حالت ۱۲ و ۲۴ ساعته، تایم‌استمپ و شمارش معکوس رو پشتیبانی می‌کنه و حتی تا صدم‌ثانیه هم می‌ره. یه حالت پیوسته (continuous) هم هست که رقم‌ها مثل کیلومترشمار ماشین پشت‌سرهم می‌چرخن.

استفاده ازش خیلی سرراسته؛ کافیه کامپوننت NumberFlow رو با مقدار و فرمت دلخواه بذاری تو JSX:

import { NumberFlow } from "number-flow-react-native";

<NumberFlow
  value={price}
  format={{ style: "currency", currency: "USD" }}
  style={{ fontSize: 32 }}
/>

از نظر دسترس‌پذیری هم فکر همه‌چیز رو کرده: با VoiceOver و TalkBack اعلان می‌ده و حالت کاهش حرکت (reduce motion) رو رعایت می‌کنه. کتابخونه به react-native-reanimated وابسته‌ست و با لایسنس MIT منتشر شده.

نکات کلیدی:

• هر رقم جداگونه و با تشخیص خودکار جهت می‌چرخه
• دوتا رندرر: View بدون وابستگی، و Skia برای اسکراب ۱۲۰ فریمی
• پشتیبانی کامل از Intl.NumberFormat و ۳۷ سیستم عددی
• TimeFlow برای زمان، تایم‌استمپ و شمارش معکوس تا صدم‌ثانیه
• سازگار با VoiceOver/TalkBack و حالت کاهش حرکت