Cara Menggunakan SVG Pada React Native CLI

Pada kesempatan kali saya akan membagikan tutorial tentang cara menggunakan SVG pada project React Native CLI. Berikut adalah langkah-langkahnya :

Tutorial Teks

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

  react-native init RNSVG

  Lalu tunggu sampai pembuatan project selesai.

• Selanjutnya silakan masuk ke folder project tersebut, dengan mengetikan perintah berikut.

  cd RNSVG

• Kemudian install package react-native-svg dengan mengetikan perintah berikut.

  Jika menggunakan npm :

  npm install react-native-svg

  Jika menggunakan yarn :

  yarn add react-native-svg

• Lalu link kan package react-native-svg ke project tersebut, dengan mengetikan perintah berikut.

  react-native link react-native-svg

• Kemudian install package react-native-svg-transformer dengan mengetikan perintah berikut.

  Jika menggunakan npm :

  npm install --save-dev react-native-svg-transformer

  Jika menggunakan yarn :

  yarn add --dev react-native-svg-transformer

• Setelah itu, ubah isi file metro.config.js dengan kode berikut.

  const { getDefaultConfig } = require("metro-config");
  
  module.exports = (async () => {
    const {
      resolver: { sourceExts, assetExts }
    } = await getDefaultConfig();
    return {
      transformer: {
        babelTransformerPath: require.resolve("react-native-svg-transformer")
      },
      resolver: {
        assetExts: assetExts.filter(ext => ext !== "svg"),
        sourceExts: [...sourceExts, "svg"]
      }
    };
  })();

• Setelah itu, copy file SVG ke folder project tersebut. Apabila belum ada silakan download file SVG nya di undraw.co

• Kemudian ubah isi file App.js dengan kode berikut.

  import React from 'react'
  import { StyleSheet, View } from 'react-native'
  import Idea from './idea.svg'
  
  const App = () => {
    return (
      <View style={styles.container}>
        <Idea width={300} height={200} />
      </View>
    )
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  })
  
  export default App

  Silakan ubah bagian "import Idea from './idea.svg'" sesuai dengan svg yang akan digunakan.

  Lalu sesuaikan juga component "<Idea width={300} height={200} />" dengan file svg yang di import.

• Setelah itu, silakan jalankan project react-native tersebut.

Tutorial Video