SVG

Nesta aula veremos como utilizar uma imagem vetorial, que se adapta a tamanhos diferentes sem perda de qualidade. Iremos trabalhar com o formato SVG, muito utilizado na internet.

Adicionando bibliotecas

O react native não dá suporte ao SVG, então, precisamos instalar bibliotecas que auxiliem nessa questão.

Para instalar as bibliotecas, execute em seu terminal os seguintes comandos:

npm install react-native-svg --save

e

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

Configure o projeto

Na raiz do projeto, crie um arquivo nomeado de metro.config.js e insira nele o seguinte conteúdo:

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

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

Se você estiver usando o Expo, também precisa adicionar isso a app.json:

" packagerOpts " : {
       " config " : " metro.config.js " ,
       " sourceExts " : [
         " expo.ts " ,
         " expo.tsx " ,
         " expo.js " ,
         " expo.jsx " ,
         " ts " ,
         " tsx " ,
        " js " ,
        " jsx " ,
         " json " ,
         " wasm " ,
         " svg " 
      ]
    }

Utilizando imagens vetoriais

Com as bibliotecas instaladas e a configuração feita, temos suporte para utilizar imagens no formato SVG.

No projeto temos uma imagem vetorial na pasta /assets/svg. Vamos importar essa imagem como um componente react e poderemos utilizá-lo em nosso código.

Veja um exemplo abaixo:

    import ImdLogo from './assets/svg/imd-logo.svg'

Daí em diante, é possível utilizar essa imagem como um componente. Porém, é importante informar as dimensões como propriedades do componente.

Para praticar, acompanhe a aula e implemente o código abaixo:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import ImdLogo from './assets/svg/imd-logo.svg'

export default function App() {
  return (
    <View style={styles.container}>
      <ImdLogo width={300} height={300} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  grande: {
    fontSize: 50
  }
});