Añadir un SVG en React Native con Expo

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos añadir una imagen SVG en React Native usando Expo.

Lo primero que haremos es instalar las dependencias necesarias:

Primero react-native-svg

expo install react-native-svg

Y ahora instalamos react-native-svg-transformer

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

Una vez instaladas tenemos que configurar react-native-svg-transformer.

Para ello abrimos el archivo metro.config.js y añadimos:

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

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

Y si usamos TypeScript tendremos que añadir este código dentro del archivo declarations.d.ts (si no tenemos este archivo, lo creamos).

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

Y ahora vamos a probarlo.

Primero guardamos este svg de prueba:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Es un circulo:

Y lo guardamos con el nombre circle.svg.

Una vez guardado, lo vamos a cargar en nuestro componente de la siguiente forma:

Primero lo importamos:

import Circle from './assets/circle.svg';

Y lo utilizamos como si fuese un componente más:

   <Circle width={100} height={100} />

Una vez implementado, debemos hacer un nuevo build.