React Native - Cara Pakai Vector Icons

Halo semuanya, di postingan kali ini kita akan menginstall dan menggunakan icon di react native dengan menggunakan package react-native-vector-icons.

Penggunakan icon untuk tampilan merupakan suatu hal yang bisa digunakan untuk mempermudah user dalam menggunakan aplikasi kita. Kali ini kita akan menggunakan package react-native-vector-icons untuk menampilkan icon. Package ini sudah menyediakan berbagai versi icon, mulai dari FontAwesome, Ionicons, MaterialIcons, Entypo, dan masih banyak lainnya. Untuk lihat penjelasan lengkapnya bisa di cek langsung di repository officialnya di link ini.

Sebelum masuk ke codingnya, saya akan jelaskan secara singkat environment yang saya gunakan. Di project kali ini, saya akan menggunakan react native versi 0.67.3. React native nya di compile menggunakan komputer dengan OS Windows 10. Package react-native-vector-icons yang digunakan adalah 9.2.0.

Langkah instalasi:

1.) Install package menggunakan command berikut

npm install --save react-native-vector-icons

2.) Menambahkan line berikut di paling bawah pada file android/app/build.gradle

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

Untuk menggunakan iconnya, kita bisa pakai coding berikut. Seperti pada umumnya, bagian import di taruh di atas file, sedangkan bagian iconnya di taruh di tempat yang diinginkan.

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon name="heart" size={30} color="red" />

Berikut adalah coding sederhananya:

import React from 'react';

import { View } from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {

  return (

    <View style={{flexDirection: 'row', marginRight: 10, marginLeft: 10, marginTop: 25}}>

      <Icon name="heart" size={30} color="red" />

      <Icon name="star" size={30} color="orange" />

      <Icon name="user" size={30} color="blue" />

      <Icon name="home" size={30} color="green" />

      <Icon name="smile-o" size={30} color="pink" />

      <Icon name="send" size={25} color="navy" />

    </View>

  );

}

export default App;

Hasilnya dapat dilihat sebagai berikut:

Untuk melihat daftar icon yang ada di react-native-vector-icons, kita bisa lihat disini. Sekian tentang cara pakai icon dengan menggunakan package react-native-vector-icons. Semoga membantu kalian yang kesulitan. Semoga bermanfaat. Selamat membaca dan mecoba.

Salam Share,

Funtastic Share