React native: Fetch not working for HTTP requests on Android

Vấn đề

Vừa rồi mình có tự mày mò làm một app di động với React native để phục vụ cho dự án IoT của công ty, trong app của mình có một chức năng call REST Web API để hiển thị dữ liệu cảm biến. Khi app chạy trên máy ảo, mọi thứ hoặt động bình thường trên cả Android và IOS, dữ liệu trả về và gửi đi đều ngon lành. Tuy nhiên, khi export file release và cài đặt ứng dụng trên android mọi thứ lại không như mình nghĩ. Dữ liệu call về không hiển thị trên UI và cũng không thể gửi dữ liệu đi. Vấn đề này thực sự phức tạp với một dân không chuyên như mình. Sau khoảng một giờ mày mò, cuối cùng mình cũng tìm ra cách giải quyết.

Nguyên nhân

Mình đã dùng method fetch(‘your_domain/api_service’) để call API trong app của mình, API của mình sử dụng giao thức HTTP thay vì HTTPS. Tuy nhiên các phiên bản android mới không cho phép sử dụng giao thức HTTP. Đó là nguyên nhân khiến một số chức năng với API không hoặt động khi app hoặt động trên thiết bị thực.

Cách giải quyết

Bạn chỉ cần chỉnh sửa file AndroidManifest.xml theo đường dẫn: android/app/src/main/AndroidManifest.xml thành:

<manifest 
  xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:usesCleartextTraffic="true" tools:targetApi="28"> 
    ... 
    </application>
</manifest>

Thế là mọi thứ được giải quyết. Giờ các bạn có thể fetch HTTP requests trên android mà không gặp phải vấn đề gì.