Change Theme to Dark like Apple in React Native

خیلی وقت بود داشتم فکر می کردم بهترین راه حل واسه تغییر تم یه برنامه تو ریکت نیتیو چیه و مثلا سیستم عامل هایی مثل مک یا ویندوز زیرساخت کامپوننت هاشونو چطور طراحی کردن که تغییر تم تو کل سیستم به صورت آنی تاثیر می زاره و حالت خفن دیگه اینکه سیستم عاملهای اپل تغییر تم رو با انیمیشن پیاده سازی کردن که حس خیلی خوبی به کاربر می ده.

تصمیم گرفتم هر جور شده این حالت رو تو ریکت نیتیو پیاده کنم و با کسایی که به اینجور کارا علاقه مندن به اشتراک بزارم.

پیش نیازها

کتابخونه react-native-reanimate

که واسه انیمیت کردن ازش استفاده می کنم و در این حد بهتون بگم که فرقش با Animated خود ریکت نیتیو اینه که این کتابخونه همه ی انیمیشن ها رو موقع تعریف به UI Thread می فرسته که دیگه موقع اجرا نیازی به ارتباط با JS Thread نیست و Frame Rate رو به طور محسوسی افزایش می ده. (Declarative Animation API)

کتابخونه react-native-redash

که یه سری Utility هست که من واسه Interpolate رنگ ازش استفاده می کنم.

مراحل انجام

خب اولین کاری که باید انجام بدیم اینه که یه Context واسه تم تعریف کنیم که بتونیم تو صفحات و کامپوننت های مختلف به تم انتخاب شده دسترسی داشته باشیم و موقعی که تم تغییر کرد همه ی صفحات و کامپوننت هایی که تم رو پیاده کردن متوجه بشن و دوباره رندر بشن.

همچنین متد تغییر تم رو هم تو Context داریم که هر جا خواستیم بتونیم تم رو عوض کنیم.

خب حالا باید کل کامپوننت App رو بزاریم تو Context مون که بتونیم از امکاناتی که بالا گفتم استفاده کنیم.

تو این مرحله می خوایم یه Custome Hook بنویسیم که بتونیم بعدا تو کامپوننت هامون ازش استفاده کنیم.

این Custom Hook چند تا چیز بهمون میده

تم جاری theme
متدی برای تغییر تم changeTheme
رنگ مورد نیاز به عنوان backgroundColor
رنگ مورد نیاز به عنوان ForegroundColor

اگه با کتابخونه های react-native-reanimted و react-native-redash کار نکرده باشید احتمالا کد بالا یه کم گیج کننده باشه.

حالا می خوایم دو تا کامپوننت بنویسیم یکی به اسم Stack که یه Wrapper روی View هست و یکی دیگه به اسم Button که از اسمش مشخصه چیکار می کنه که بتونیم تو همه برنامه ازشون استفاده کنیم.

مثلا ما از Stack به عنوان Container همه ی صفحاتمون استفاده می کنیم و می تونیم لاجیک مربوط به Container تمام صفحات رو روی یه کامپوننت مجتمع کنیم.