1

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:

2
  • Vc importou no projeto as dependências para pode usar imagem .SVG ??
    – hugocsl
    Commented 24/10/2020 às 14:17
  • Verifique o caminho da imagem, algo como: "./Vector5.pn" para "./Splash Screen/Vector5.png"
    – acb09
    Commented 24/10/2020 às 14:46

1 Resposta 1

0

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"
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .