Cara Mengganti Icon Aplikasi React Native iOS

  Assalamu'alaikum Wr. Wb.

              Setelah sebelumnya saya memposting tentang cara mensetting modul react-native-vector-icons pada Project React Native iOS, sekarang kita akan membahas tentang bagaimana cara mengganti icon bawaan template React Native iOS dengan icon milik kita sendiri yang kita inginkan sesuai aplikasi Mobile iOS yang akan kita kembangakan. Icon aplikasi sendiri adalah icon yang terlihat pada list aplikasi yang terdapat pada halaman menu aplikasi iOS pada Smartphone iOS kita yang biasanya dibawahnya terdapat nama aplikasi tersebut, langsung saja untuk mengganti icon pada aplikasi React Native iOS kita adalah sebagai berikut.

  1. Siapkan Aplikasi React Native iOS anda
              
    Yang perlu anda siapkan pertama kali tentu saja adalah aplikasi React Native iOS, jika anda belum memilikinya maka anda dapat mulai membuat aplikasi React Native iOS anda di sini.
  2. Siakan gambar yang nantinya akan menjadi icon aplikasi anda
               
    Selanjutnya yang anda perlukan adalah gambar yang nantinya akan menjadi icon aplikasi anda, pastikan icon yang anda pasang nanti sesuai dengan fungsi aplikasi yang sedang anda kembangkan.
  3. Masuk ke halaman https://appicon.co/
                
    Setelah anda menyiapkan gambar icon anda, selanjutnya kunjungi website https://appicon.co/, pada halaman tersebut centang jenis platform yang akan anda pasang icon baru anda, karena kita akan memasangnya pada project iOS pada iPhone maka centang pada pilihan iPhone, untuk filename nya opsional anda bisa mengosonginya untuk melanjutkan.




  4. Generate icon anda
                
    Setelah melakukan langkah sebelumnya maka yang tinggal anda lakukan adalah menggenerate icon anda, tekan tombol generate pada halaman website App Icon generator.
  5. Taruh folder icon baru anda pada project
               
    Dari folder Download anda copy folder assets icon yang telah anda download lalu pastekan ke project anda pada directory /ios/ProjectAnda/images.xcassets/, lalu replace folder AppIcon.appiconset dengan folder AppIcon.appiconset anda yang baru beserta file Contents.json yang ada di dalamnya.




  6. Run ulang aplikasi anda
               Langkah terakhir untuk menyelesaikan perubahan icon pada aplikasi anda adalah dengan mengerun atau membuild ulang aplikasi anda, untuk development anda dapat memngetikkan perintah berikut pada terminal.

                npx react-native run-ios

Posting Komentar

0 Komentar