Nâng cấp version react native (new architecture) từ RN 0.70.x đổ xuống lên 0.73.0

 

Nâng cấp version React Native 0.70.x -> 0.73.x

Chào mọi người, TíT đây ✌✌gần đây TíT có thấy mọi người đang dần dần cập nhật RN lên version mới nhất rồi 0.73.x ý, nên TíT cũng muốn chia sẻ 1 số thử khi cập nhật lên version mới trong project của TíT hy vọng giúp mọi người update version nhanh hơn xíu thôi 👻. Lét đu ít 💪

Phớt thinh

Mọi người vào trang https://react-native-community.github.io/upgrade-helper/ - đây là trang giúp mọi người xem những thay đổi giữa 2 version 

Sê cừn thing

React Native 0.73.x sẽ hướng tới code sử dụng kotlin cho android nên các file như MainActivity, MainApplication sẽ chuyển từ code .java sang kotlin .kt  do đó sẽ có 1 vài cái thay đổi liên quan tới syntax import packages module (native modules - trang của TíT có 1 vài bài ví dụ về cái này đó 👏😆). Cái này làm theo hướng dẫn ở Phớt thinh là có hướng dẫn r đó.

Thớt thing

Version mới này RN sẽ recommend mọi người sử dụng react-native-bootstplash thay cho react-native-splash-screen. Nên là khi setup sẽ cần phải setup lại cho cả ios và android đó nha. Bên ios như dự án của TíT thì dùng nguyên lại cái .storyboard cũ cũng được😅😅 xong setup như docs thoii à.

Tuy vậy cái bootsplash này sẽ chỉ hiện logo app + tên của brand theo như docs đó. Có 1 vấn đề là ở bên android sẽ không thể thêm ảnh full màn hình mobile như dùng splash-screen được (hoặc có cách nhưng TíT chưa tìm ra, trước tìm 2 - 3 days k có cách💀) nên là để dùng dc lại splash có chèn image full màn thì dùng như project của TíT coi được không nhá

<style name="BootTheme" parent="AppTheme">

    <item name="android:windowBackground">@drawable/bootsplash_logo</item>

    <item name="android:windowNoTitle">true</item>

</style>

Thêm code này dưới cùng trong thẻ <resources>, bootspash_logo là ảnh full màn mobile đó.

Các điều tiếp theo 😆😆

👉 node sử dụng là >= 18 nên nếu mọi người có những project có phiên bản node cũ hơn như 16 hay 17 thì theo TíT mọi người nên sử dụng nvm để quản lý node version.

👉 sẽ có 1 vài thư viện mà không hỗ trợ mới dành cho RN 0.73 ví dụ như react-native-job-queue, react-native-code-push, react-native-gesture-handler, ... thì khi cập nhật lên sẽ gâp ra 1 số lỗi không build được. Nên mọi người sẽ dùng libs patch-package nhá.

👉 flipper và hermes được thông báo là sẽ mạnh hơn, tối ưu hơn giúp dev nhàn hơn 😆

Trên đây là bài về 1 số điều lưu ý khi nâng cấp version RN, nếu khi cập nhật mọi người bị vướng ở đâu mà code build không lên thì có thể liên hệ fb TíT nha. Cảm ơn mọi người đã đọc, mọi góp ý TíT các bạn gửi về FB để TíT có thể cải thiện tốt hơn trong quá trình viết blog nha.💖💖💖