Como Adicionar Imagens SVG no React Native

Adicionando a Partir de URL

O processo de adicionar uma imagem SVG a partir de uma URL é bastante fácil, você só precisa instalar a biblioteca:

npm install react-native-svg

Importar e Usar:

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { SvgUri } from 'react-native-svg'

const App = () => {
	return (
		<View style={styles.view}>
			<SvgUri
				width="100%"
				height="100%"
				uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg" />
		</View>
	)
}

const styles = StyleSheet.create({
	view: {
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	}
})

A desvantagem é que seu aplicativo precisa de internet para poder acessar o arquivo SVG.

Adicionando a Partir de Arquivo

Para adicionar uma imagem SVG a partir de um arquivo, você precisa instalar duas bicliotecas:

npm i react-native-svg react-native-svg-transformer

Depois criar ou modificar o arquivo metro.config.js que está na raiz do projeto:

No meu caso, o arquivo já existia e ele continha a seguinte configuração:

module.exports = {
	transformer: {
		getTransformOptions: async () => ({
			transform: {
				experimentalImportSupport: false,
				inlineRequires: false,
			},
		}),
	},
};

Eu adicionei algumas linha de código e ele ficou assim:

const { getDefaultConfig } = require("metro-config");

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

Depois disso, é só importar e usar o componente:

import React from 'react'
import { View, StyleSheet } from 'react-native'
import Logo from "./icons/logo.svg"
import Delete from "./icons/Delete.svg"

const App = () => {
	return (
		<View style={styles.view}>
			<Logo width={100} height={100} />
			<Delete width={100} height={100} fill={'#E4E6EB'} />
		</View>
	)
}

const styles = StyleSheet.create({
	view: {
		backgroundColor: '#18191A',
		flex: 1,
		justifyContent: 'center',
		alignItems: 'center'
	}
})