Cara Menggunakan react-native-vector-icons Pada React Native CLI

Pada kesempatan kali ini saya akan membagikan tutorial tentang cara menggunakan react-native-vector-icons pada project React Native CLI. Berikut adalah langkah-langkahnya :

Tutorial Teks

• Silakan buat project react-native cli nya, dengan mengetikan perintah berikut.

  react-native init RNVectorIcon

  Lalu tunggu sampai pembuatan project selesai.

• Selanjutnya silakan masuk ke folder project yang tadi sudah dibuat, dengan mengetikan perintah berikut.

  cd RNVectorIcon

• Lalu install package react-native-vector-icons, dengan perintah berikut.

  Jika menggunakan npm :

  npm install react-native-vector-icons

  Jika menggunakan yarn :

  yarn add react-native-vector-icons

• Setelah itu, link kan package react-native-vector-icons yang sudah terinstall ke project tersebut. Dengan mengetikan perintah berikut.

  react-native link react-native-vector-icons

• Kemudian buka code editor di folder project tersebut, lalu ubah file App.js seperti berikut ini

  import React from 'react'
  import { StyleSheet, View } from 'react-native'
  import Icon from 'react-native-vector-icons/Ionicons'
  
  const App = () => {
    return (
      <View style={styles.container}>
        <Icon name="_____" size={64} color="black" />
      </View>
    )
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  })
  
  export default App

  Silakan ubah "Ionicons" pada import package Icon, sesuai dengan Bundle Icon yang akan digunakan.

  Silkan isi nama icon yang akan digunakan pada props "name" sesuai dengan Bundle Icon yang digunakan, sesuaikan ukuran dengan mengubah isi props "size", dan sesuaikan isi props "color" sesuai warna yang akan digunakan.

• Setelah itu, silakan jalankan project react-native tersebut

Tutorial Video