Cara Setting React Native Vector Icons di Project React Native iOS

  Assalamu'alaikum

         Setelah sebelumnya saya memposting artikel tentang cara bagaimana memulai meggunakan React Native untuk aplikasi iOS, pada postingan saya kali ini saya akan membahas tentang instalasi salah satu plugin yang biasa dipakai pada Aplikasi iOS yaitu React Native Vector Icons. Plugin tersebut adalah plugin yang menyediakan banyak gambar berupa icon yang sangat berguna dan dibutuhkan untuk membuat user interface untuk sebuah aplikasi Front End untuk platform apapun, terapi pada pembahasan kali ini saya hanya akan menjelaskan instalasi pada aplikasi React Native iOS.

1. Pastikan anda sudah memiliki Project iOS
                 Sebelum anda ingin menggunakan React Native Vector Icons anda harus memiliki Project iOS anda terlebih dahulu, untuk tutorialnya anda bisa mebaca tutorialnya di sini. 
2. Install React Native Vector Icons menggunakan NPM atau Yarn
                 Pertama yang perlu anda lakukan adalah memiliki package react-native-vector-icons pada folder node_modules pada project anda, anda dapat menginstallnya dengan mengetikkan perintah berikut pada terminal:
   
                  npm install react-native-vector-icons (menggunakan npm)
                                      atau 
                  yarn add react-native-vector-icons (menggunakan yarn)
   
                 Anda juga dapat menginstall versi tertentu dari react-native-vector-icons, dengan menambahkan @ di akhir nama package, contoh:
   
                  npm install react-native-vector-icons@9.2.0 (menggunakan npm)
                                      atau
                  yarn add react-native-vector-icons@9.2.0 (menggunakan yarn)
   
                 dengan menjalankan salah satu perintah di atas maka akan menginstall react-native-vector-icons dan menambahkan nama package di file package.json.
3. Jalankan pod install pada terminal
                  Untuk menambahkan package atau pod pada project iOS anda maka anda harus masuk ke folder ios pada project React Native iOS anda dan mengetikkan perintah berikut:
   
                   pod install
   
                  Dengan mengetikkan perintah tersebut maka akan menginstall pod react-native-vector-icon dan menguncinya ke dalah file Podfile.lock.
4. Copy folder Fonts ke dalam project iOS anda
   
                  
   
   
   
   
   
   
   
   Selanjutnya yang perlu anda lakukan adalah masuk ke dalam folder node_modules/react-native-vector-icons/ dan copy folder Fonts lalu pastekan ke dalam folder ios/ProjectAnda/, anda dapat melakukannya melalui finder atau menggunakan Xcode dengan membuka file ProjectAnda.xcworkspace.
5. Copy dan Paste nama-nama fonts yang terdapat pada folder Fonts ke dalam file Info.plist
   
                  
   
   
   Masuk ke Xcode project anda lalu cari dan klik file Info.plist, akan terdapat list informasi property yang terdapat di tengah jendela Xcode anda, tambahkah satu baris informasi property dengan nama "Font provided by application", masukkan nama-nama fonts pada folder Fonts yang pada telah ditambahkan pada langkah sebelumnya satu per satu.
6. Tambahkan file react-native.config.js
                   Di direktory utama project anda tambahkan satu buah file bernama react.native.config.js dan pastekan kode berikut:
   
         module.exports = {
             dependencies: {
                  'react-native-vector-icons' : {
                       platforms: {
                           ios: null,
                       },
                  },
             },
         };
   
                  Sesuai yang tertera pada dokumentasi react-native-vector-icons dengan menenambahkan file tersebut maka akan menghindari bertambahnya font ke Build Phases, Copy Pods Resources, yang akan berakhir ke bundle project iOS anda saat anda menggukakan linking otomatis pada project anda.
7. Jalankan kembali perintah npx react-native run-ios
                 Setelah semua langkah-langkah di atas anda lakukan maka langkah terakhir yang perlu anda lakukan adalah mengetikkan perintah npx react-native run-ios pada root directori project iOS kalian untuk mengcompile atau membuild debug project iOS kalian.
8. Mengatasi error 'Unrecognized font family 'Ionicons'
                 Jika versi react-native-vector-icons yang anda gunakan adalah yang terbaru 2022 biasanya anda akan mendapati error unrecognized font family 'Ionicons', untuk mengatasi error tersebut anda hanya perlu menambahkan script NamaIcon().loadFont().then(); sebelum anda merender project React Native iOS anda di dalam class atau function sebagai contoh adalah sebagai berikut:
   
   
   
   
   
   

                    Dengan menggunakan script tersebut maka error yang terjadi pada project iOS anda sebelumnya akan teratasi dan anda sudah bisa menggunakan react-native-vector-icons pada Project React Native iOS anda.
9.