Cài đặt App icon cho React Native App

App code bằng React Native có thể submit lên cả 2 nền tảng là: Google Play và App Store do đó mình sẽ hướng dẫn cách tạo App Icon cho cả 2 nền tảng trên.

Đầu tiên chúng ta cần 1 ảnh lớn hơn hoặc bằng 1024x1024 pixels để làm logo icon. ví dụ: 

Giả sử mình đang có cái Icon của bên app startupbuilder ở trên. Bây giờ mình sẽ thay Icon cho IOS lẫn android của cả 2 nền tảng trên.

App Icon cho iOS

Generate icon

Sử dụng tool Icon Set Creator (trên App Store) để tạo ra bộ icon với các kích thước khác nhau cho các loại thiết bị iOS.

Kéo thả ảnh và chọn thư mục lưu ảnh là xong. Lưu lại chỗ nào đó.

Config xcode setting icon

Sau đó mở xcode lên: 

Mở project React Native (file [project].xcworkspace trong thư mục ios).

Tìm đến thư mục image (Images.xcassets) -> bấm AppIcon -> Chuột phải chọn import -> thêm vô thôi

Xong, build lại app để thấy kết quả!

App Icon cho Android

Generate icon

Làm tương tự như bên iOS, chúng ta lấy 1 ảnh icon với kích thước tối thiểu 1024x1024 pixels. Sau đó dùng trang web sau để tạo bộ icon: Android Assets Studio

Giải nén mớ Icon ta được: 

thư mục dạng: mipmap-hdpi, mipmap-mdpi, mipmap-xhdpi, ..., trong mỗi thư mục lại chứa file ic_launcher (tên mặc định). Copy (ghi đè) toàn bộ vào trong thư mục android > app > src > main > res.

Chúng ta còn cần cài đặt cho Icon hình tròn của những kiểu thiết bị tật nguyền nữa:  ic_launcher_round

vô file: [project]/android/app/src/main/AndroidManifest.xml kiểm tra chắc chắn có 2 dòng dưới đây: (nếu không có thì thêm vô thôi)

Chú ý phải có cái icon tròn nha:

Build lại app để thấy kết quả!

Tham khảo thêm: https://developer.android.com/google-play/resources/icon-design-specification