Problem adding SVG to React Native

Question

I am unable to add an SVG to a component (SplashScreen), follows the code:

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>

    );
};

Follow the code of stylization:

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
    }
});

I guarantee I am referencing all the files correctly. Any idea what might be wrong?

Project folders:

The screenshot of the app:

Answer 1

To make use of SVG in React Native you will need a library to help you with this.

How are you using Expo, take a look in that documentation of react-native-svg and also in the library react-native-svg-transformer which will allow the import of Svgs.

Read the documentation cited for installation guidelines on older versions of React Native and Expo, and how to set up for use in Jest.

Installation

Install the two libraries, being the react-native-svg-transformer as a development dependency:

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

Setup

To configure the react-native-svg-transformer, unify your metro.config.js existing with the below. If you do not have a file metro.config.js, create it.

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

For those who use Expo, in addition to the previous step, you need to add the following in the app.json:

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

If you are using Typescript, add the following typing to the file declarations.d.ts:

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

Utilizing

It is now possible to use an SVG as an React component:

import MySvg from './my.svg';

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

Using with the Jest

When testing a component that renders an SVG, you will need configure a mock for Jest. I’m not sure if this step is also necessary if you are using the Expo.

1. Create a file __mocks__/svgMock.js:

module.exports = "SvgMock";
module.exports.ReactComponent = "SvgMock";

2. Map it to your Jest settings (package.json or jest.config.js):

moduleNameMapper: {
  "\\.svg": "<rootDir>/__mocks__/svgMock.js"
}