React Native — Tutorial Menggunakan react-native-vector-icons pada iOS
Halo, saya Edi Murwanto. Pada artikel kali ini saya mau berbagi mengenai bagaimana cara menggunakan react-native-vector-icons pada iOS di React-Native.
Disclaimer dulu, ini berdasarkan pengalaman pribadi saya yang biasanya sering menggunakan react-native-vector-icons ini untuk platform android, ketika saya coba pada platform iOS ternyata banyak terjadi error. Ada beberapa konfigurasi yang berbeda untuk installasi dan configurasi react-native-vector-icons pada platform android dan iOS. Baiklah, berikut cara untuk menggunakan react-native-vector-icons pada iOS :
Keperluan :
1. Proyek React Native
Untuk kamu yang belum mempunyai proyek react-native silahkan buat terlebih dahulu dengan mengikuti dokumentasi berikut: Create new proyek pada React-Native.
2. XCode IDE
Agar dapat menjalankan proyek react-native pada platform iOS pastikan XCode IDE yang sudah terinstall pada Macbook atau iMac kamu.
Langkah-langkah :
1. Installasi
Langkah pertama yaitu installasi atau menambahkan dependency react-native-vector-icons pada proyek react native. Berikut command untuk menambahkan react-native-vector-icons melalui npm :
npm install react-native-vector-icons
2. Import .xcodeproj ke XCode IDE
Selanjutnya yaitu buka XCode IDE dan import file .xcodeproj yang ada pada proyek react-native dengan cara berikut : Pada XCode pilih File > Open > pilih file dengan exstensi .xcodeproj yang ada pada folder ios.
3. Menambahkan fonts
React-native-vector-icons ini mempunyai satu folder yang berisi semua fonts yang perlu ditambahkan pada XCode. Klik kanan pada nama proyek di XCode > Create new Group > Fonts. Kemudian drag and drop atau copy semua fonts dari node_modules > react-native-vector-icons > Fonts.
4. Edit info.plist
Kemudian daftarkan semua fonts yang sudah di tambahkan sebelumnya pada file info.plist.
5. Pod install
Jalankan pod install pada terminal, ini berguna untuk menginstal semua iOS dependencies. Berikut command untuk melakukan pod install.
cd ios && pod install
6. Menambahkan icon pada component.
Kamu bisa menambahkan icon pada react native component dengan cara berikut :
7. Menjalankan proyek react-native pada platform iOS
Terakhir yaitu menjalankan proyek react-native dan memastikan react-native-vector-icons bekerja. Berikut command untuk menjalankan proyek react-native pada platform iOS.
npm run ios
Berikut contoh hasil dari tampilan react-native-vector-icons.
Demikian, semoga tutorial ini membantu kamu yang baru mencoba menggunakan react-native untuk platform iOS dan menemukan masalah yang sama dengan saya. Untuk lebih jelasnya kamu bisa juga menonton video tutorialnya di link berikut :
Jika ada yang kurang pada tutorial di atas, tolong tambahkan pada kolom komentar ya. Terimakasih
