Trong quá trình phát triển phần mềm quá trình nâng cấp phiên bản framework, thư viện là nỗi sợ của người phát triển. Vấn đề break change, không tương thích giữa các library, package, framework, ... sinh ra nhiều bug trong phần mềm. Dù rất e dè nhưng đôi lúc chúng ta buộc phải nâng cấp. Với React Native việc nâng cấp cần thêm một ít kỳ công vì nó chứa cả native source của cả ios và android.

Trước khi bắt đầu

• Bài viết này dành cho React Native được tạo bằng react-native init.
• Chắc chắn bạn có kiến thức về React Native, vấn đề liên quan tới build android, ios và dự án mà bạn đang phát triển.
• Nhớ commit những code thay đổi hiên tại (Chắc chắn rồi 😅).
• Bạn cũng nên lướt qua change log của React cũng như React Native xem thử có những thay đổi nào làm tác động source code hiện tại không?
• Kiểm tra các package thứ 3 đặc biệt là các native package xem phiên bản của nó hiện tại có tương thích với React Native mới không?
• Sự tỉ mỉ, cẩn trọng.

// Mà thôi. Nếu bạn nào lười thì cứ bắt đầu thôi, lỗi fix sau 😎.

Bắt đầu

Mà trước khi bắt đầu chắc bạn cũng sẽ muốn thử cách upgrade chính chủ https://facebook.github.io/react-native/docs/upgrading. Chắc chắn có conflict đặc biệt đối với file project.pbxproj. File này chứa nhiều mã hash cực kì khó làm việc với Git 🤬. Mình sẽ nói về nó sau. Với cách chính chủ này tạo ra nhiều conflict và khó nắm rõ được những thay đổi. Làm việc với đống conflict này cũng hoa cả mắt rồi 😱. Thay vào đó mình sẽ làm thủ công với sự hỗ trợ upgrade-helper hoặc rn-diff-purge. Bắt đầu nào!!!

Diff - Sự thay đổi

Sử dụng 1 trong 2 công cụ upgrade-helper hoặc rn-diff-purge để xem thay đổi giữa phiên bản React Native hiện tại của bạn và phiên bản bạn muốn upgrade.

Bạn đã có diff thay đổi giữa 2 phiên bản React Native, bước tiếp theo là apply nó vào source hiện tại.

Apply - Áp dụng vào source

Bạn sẽ sử dụng git apply ??? Với mình thì mình không sài nó vì như đã nói ở trên thì nó tạo ra quá nhiều conflict nên mình sẽ đi apply thủ công dựa trên cái diff đó.

Lan man 1 xí, nếu bạn nào muốn sài git apply thì làm sao để lấy được file patch của diff ở trên. Bạn có thể clone về rồi dùng git để tạo diff. Nhưng có 1 cách khác nhanh hơn nhiều là chỉ cần thêm .patch vào cuối link của Github là có thể down về. Quá tiện. Như ví dụ của mình file patch là https://github.com/react-native-community/rn-diff-purge/compare/release/0.53.3..release/0.59.10.patch

Quay lại vấn đề. Việc apply chủ yếu là sửa source, config liên quan tới từng nền tảng ios và android. Nên bạn cần có chút kiến thức về từng nền tảng cũng như hiểu rõ dự án đang làm. Dưới đây là một số chú ý:

Thay thế RnDiffApp

Diff trên chứa tên của dự án example là RnDiffApp trong source, nên bạn cần phải thay thế với tên dự án của bạn. Đây là một ví dụ trong file AppDelegate.m:

RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"RnDiffApp"
                                            initialProperties:nil];

Sửa file project.xbproj

Với file project.xbproj ta khó có thể sửa nó thủ công theo kiểu text được. Bạn cần xem diff để biết được thay đổi là gì và sửa nó trên XCode.

Phía dưới là ví dụ trong dự án của mình

Kiểm tra thay đổi

Xem diff mình đoán được rằng:

• Đường màu hồng: Không có sự thay đổi trong các framework: libRCTAnimation.d, libReact.a
• Khung màu xanh: Thêm JavaScriptCore.framework

Những file khác

• Những thay đổi ở các file khác liên quan tới config của từng nền tảng như build.gradle, MainApplications, setting.gradle, ... cũng không có gì quá khó khăn nếu bản có kiến thức về android.
• Với file package.json bạn cũng update phiên bản của những package mà React Native mới không hỗ trợ. Cái này thì bạn phải chịu khó vào trang chủ của từng package mà xem thôi.
• Một số thay đổi trong các App.js, index.js , ic_laucher.png thì tất nhiên không cần thiết thay đổi 😀.

Đến lúc build lại app và test.

Build và Test

Sau khi apply những thay đổi để cho chắc thì nên xoá thư mục node_modules, cache

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-*

npm install

npm start -- --reset-cache

Cũng nhớ chaỵ lại pod install nếu bạn có sử dụng Pod.

Tiến hành build app và test trên từng nên tảng. Nếu có mất kỳ lỗi nào thì bạn phải kiểm tra lại xem apply diff có sai sót gì không và sử dụng ông bụt Google 😅.

Build và chạy được app lên chỉ mới là bước khởi đầu. Giai đoạn mệt nhọc đang chờ bạn phía sau 🤪.

Kết luận

Bài viết giới thiệu qua quá trình upgrade phiên bản trong React Native với sự trợ giúp của upgrade-helper hoặc rn-diff-purge. Hy vọng nó giúp ích được bạn trong quá trình làm việc với React Native.

Upgrading vui vẻ!!!