React Native -Menambahkan Icon Cantik dengan React Native Vector Icons

Icon merupakan elemen yang sangat penting dalam desain user interface sebuah aplikasi. pemilihan icon yang tepat sangat mempengaruhi kemudahan user dalam memakai aplikasi. Lalu bagaimana cara mendapatkan icon yang tepat untuk project react native kita.

Untuk itu kali ini saya akan membagikan informasi tentang modul yang sering digunakan untuk memudahkan penambahan Icon pada project react native.

Kita akan menggunakan React-Native-Vector Icon. module ini mempunyai banyak pilihan Icon yang sangat bagus dan berkualitas. dan yang terpenting semuanya Gratis.

Silahkan lihat  koleksi icon react-native vector-icons apabila anda penasaran seperti apa koleksi Iconnya.

Cara install React Native Vector Icons

Untuk menambahkan  modul React Native Vector Icons ke dalam project anda, pertama buka terminal.

Apabila anda belum berada di folder project React Native anda, silahkan masuk dulu ke folder Project React Native Anda.

Lalu jalankan perintah ini di terminal:

yarn add react-native-vector-icons

Atau ini apabila di komputer kalian belum terinstall Yarn

npm install react-native-vector-icons

Selanjutnya lakukan pengaturan otomatis dengan menjalankan perintah:

react-native link react-native-vector-icons

Demikian cara menambahkan react-native vector-icons pada project react native. selanjutnya silahkan jalankan project untuk memerika apakah installannya sudah benar atau tidak. silahkan jalankan perintah di bawah ini. Jangan lupa siapkan dulu emulator kalian.

react-native run-android

Apabila project muncul di emulator berarti proses install sudah benar. namun apabila muncul error seperti gambar di bawah ini. berarti ada kesalahan dalam proses install.

FAILURE: Build failed with an exception. * Where:Settings file 'D:\ProjectName\android\settings.gradle' line: 3 * What went wrong:
Could not compile settings file 'D:\ProjectName\android\settings.gradle'. > startup failed: settings file 'D:\ProjectName\android\settings.gradle': 3:
unexpected char: '\' @ line 3, column 127. ules\react-native-vector-icons\android')
^
1 error * Try: Run with --stacktrace option to get the stack trace. Run with --info
or --debug option to get more log output. Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 8s Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/getting-started.html Command failed: gradlew.bat installDebug

Kesalahan biasanya terjadi saat proses setting link otomatis tadi. kesalahan terjadi pada penempatan tanda \ . Untuk mengatasi error tersebut buka file settings.gradle yang berada di folder android. lakukan perubahan seperti gambar di bawah ini:

Sebelum di ubah. pemisah folder memakai tanda \

Sesudah di ubah. ganti tanda \ menjadi tanda /

Kalau masih error, kemungkinan ada masalah dengan installan java. untuk memperbaiki hal ini edit file gradle.properties yang berada di folder android. tambahkan kode berikut pada baris paling bawah:

org.gradle.java.home=C:\\Program Files\\Java\\jdk1.8.0_131

Catatan:
Sesuaikan lokasi dan versi jdk yang terinstall di komputer kalian.

Baik, demikian sharing kita hari ini, semoga informasi ini bermanfaat bagi teman teman semua. Happy coding.