AnswerBun.com

Problema ao adicionar SVG no React Native

Stack Overflow em Português Asked by Pedro Vinicius on December 14, 2020

Não estou conseguindo adicionar um SVG em um componente (SplashScreen), segue o código:

import {LinearGradient} from 'expo-linear-gradient'
import React from 'react';
import {Text, View, Image} from "react-native";
import Estilos from './styles'


export default function (){
    return(
        <LinearGradient style={Estilos.gradiente} colors={['#0095FF', '#0048FF']}>
            <View style={Estilos.rectangle}>
                <Image source={require('./Vector 5.svg')}/>
                <Text style={Estilos.text}>otation</Text>
            </View>
        </LinearGradient>

    );
};

Segue o código da estilização:

import {StyleSheet} from "react-native";


export default StyleSheet.create({
    gradiente:{
        flex : 1,
        justifyContent : 'center',
        alignItems: 'center'
    },
    text: {
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: 40,
        backgroundColor : 'white',
        borderRadius :  20
    },
    rectangle: {
        position: 'absolute',
        justifyContent : 'center',
        width: 266,
        height: 100,
        backgroundColor: 'white',
        borderRadius: 20
    }
});

Garanto que estou estou referenciando todos os arquivos corretamente. Alguma ideia do que pode estar errado?

Pastas do projeto:

A screenshot do app:

One Answer

Para fazer uso de SVG em React Native você precisará de uma biblioteca que te ajude com isso.

Como está usando Expo, dê uma olhada nessa documentação do react-native-svg e também na biblioteca react-native-svg-transformer que permitirá a importação de SVGs.

Leia as documentações citadas para ver as orientações de instalação em versões mais antigas do React Native e do Expo, além de como configurar para utilização no Jest.

Instalação

Instale as duas bibliotecas, sendo a react-native-svg-transformer como dependência de desenvolvimento:

Expo

expo install react-native-svg
yarn add -D react-native-svg-transformer // ou npm install -D react-native-svg-transformer

React Native CLI

yarn add react-native-svg // ou npm install react-native-svg
yarn add -D react-native-svg-transformer // ou npm install -D react-native-svg-transformer

Configuração

Para configurar o react-native-svg-transformer, unifique seu metro.config.js existente com o abaixo. Caso não possua um arquivo metro.config.js, crie-o.

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"]
    }
  };
})();

Expo

Para quem usa Expo, além do passo anterior, é preciso adicionar o seguinte no app.json:

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

Caso esteja a utilizar TypeScript, adicione a seguinte tipagem no arquivo declarations.d.ts:

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

Utilização

Agora é possível utilizar um SVG como sendo um componente React:

import MySvg from './my.svg';

export const Screen = () => {
  return <MySvg width="100" height="100" />
}

Usando com o Jest

Ao testar um componente que renderiza um SVG, será necessário configurar um mock para o Jest. Não tenho certeza se este passo também é necessário caso esteja usando o Expo.

  1. Crie um arquivo __mocks__/svgMock.js:
module.exports = "SvgMock";
module.exports.ReactComponent = "SvgMock";
  1. Mapeie-o nas suas configurações do Jest (package.json ou jest.config.js):
moduleNameMapper: {
  "\.svg": "<rootDir>/__mocks__/svgMock.js"
}

Correct answer by Rafael Tavares on December 14, 2020

Add your own answers!

Related Questions

Socket entre 2 dispositivos

2  Asked on December 18, 2020 by beto

   

Mock variável local dentro de método com mockito e spring boot

1  Asked on December 17, 2020 by samuel-oliveira-chaves

         

Checkbox obrigatória ao apertar o botão

1  Asked on December 17, 2020 by vincius-lodi

 

Row com details na Datatable

1  Asked on December 17, 2020 by jlia-larissa-schultz

   

Estrutura Package IntelliJ

1  Asked on December 16, 2020 by caioabreudev

     

O uso de imutabilidade

1  Asked on December 14, 2020 by dougg0k

         

Problema ao adicionar SVG no React Native

1  Asked on December 14, 2020 by pedro-vinicius

     

Como colocar linhas em um gráfico e barra?

2  Asked on December 13, 2020 by djavan-pereira

 

Posso ter mais de um diretório Views em MVC?

2  Asked on December 12, 2020 by joo-carlos

         

Colo alocar uma memória baseado no tamanho do que o usuário digitou

3  Asked on December 11, 2020 by levi-ivanovsk

     

Listar duas tabelas mysql pdo

1  Asked on December 11, 2020 by leno-sousa

     

É possivel desestruturar um objeto dentro de outro objeto?

1  Asked on December 11, 2020 by christopher-william-buscoski-s

     

CMD, PowerShell, Bash – Qual a diferença?

1  Asked on December 9, 2020 by jos

         

Converter SQL query para Query Builder (Laravel)

1  Asked on December 9, 2020 by luciano-junior

         

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP