How to add SVG using React Native SVG
In React Native, incorporating SVGs is more complex compared to web development. Unlike the web, where SVGs can be used directly or inserted into HTML files, React Native does not have built-in support for rendering SVGs.
Therefore, we need to use the library to render SVGs. For this purpose, we use react-native-svg library, which enables developers to incorporate SVG into their React Native applications easily.
Installing dependencies
We'll need to install a few packages using npm, so make sure that your React Native application is built before we proceed.
You can see here how to create a React Native application.
Navigate to the root directory of your React Native project and install the dependencies using the following commands.
cd newProjectnpm i react-native-svgnpm i --save-dev react-native-svg-transformer
Rendering SVG shapes
Let's see how react-native-svg helps to render SVGs in your application.
{
"name": "awesomeproject",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "^18.0.1",
"expo": "~48.0.18",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-svg": "^13.10.0",
"react-native-svg-uri": "^1.2.3",
"react-native-web": "~0.18.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"react-native-svg-transformer": "^1.0.0"
},
"private": true
}
Lines 8–10: The Svg component creates an SVG element. It has attributes like height, width, and viewBox that define its dimensions and coordinate system,
Line 9:
Circlecomponent is used to create a circle element. It has attributes likecx(center x-coordinate),cy(center y-coordinate), andr(radius) that define its position and size. Other attributes likestroke,strokeWidth, andfilldefine its appearance.
You will observe a rendered SVG on your web browser, displaying a circle that is colored blue.
Rendering SVG images
Until now, we have learned how to create and display our SVG. In this example, we will see how to display an SVG image in React Native by importing it from our local files.
You need to follow these steps to render your local SVG file in React Native application:
Place your SVG file in the project directory or within a specific folder, such as
assetsorimages. In this case, we have placed it inassets.Import the necessary components and other required modules in your React Native component file:
import React from 'react';import { View, Text, Image, StyleSheet } from 'react-native';import SVG from '/path/to/your/svg/file.svg'
Use the
<Image>component to render the SVG file within your component's render method:
<Image source={SVG}/>
Save the changes, and the SVG file should be successfully imported and rendered in your React Native application.
Example
Imagine the following SVG named 'educative.svg' that needs to be displayed in a React Native application:
Here is a complete code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="344px" height="80px" viewBox="-0.5 -0.5 344 80" content="<mxfile host="embed.diagrams.net" modified="2023-07-12T11:04:16.467Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36" version="21.6.2" etag="EP8RJI5hbbNHE4Z-Vozi" type="embed"><diagram id="NIoj6pK1W2nAIdNBslks" name="Page-1">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</diagram></mxfile>" style="background-color: rgb(255, 255, 255);"><defs/><g><image x="-0.5" y="-0.5" width="343.33" height="80" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMDMgMjQiIGhlaWdodD0iMjQiIHdpZHRoPSIxMDMiPiYjeGE7ICA8cGF0aCBmaWxsPSIjNTU1M0ZGIiBkPSJNNS44IDMuNmMtMSAwLTEuOC44LTEuOCAydjkuMWMwIDEuMS44IDIgMS44IDJIMTZjLjIgMCAuNCAwIC42LjJsMy41IDIuNVY1LjZjMC0xLjItLjgtMi0xLjgtMkg1LjhaTTIgNS42YzAtMi4yIDEuNy00IDMuOC00aDEyLjRjMi4xIDAgMy44IDEuOCAzLjggNHYxNS44YTEgMSAwIDAgMS0xLjYuOGwtNC44LTMuNUg1LjhhMy45IDMuOSAwIDAgMS0zLjgtNFY1LjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPiYjeGE7ICA8cGF0aCBmaWxsPSIjNTU1M0ZGIiBkPSJtOCA2LjIgMy40IDMuM2EuOS45IDAgMCAxIDAgMS4zbC0zLjggMy4zLTEuMS0xLjQgMy0yLjYtMi44LTIuNiAxLjItMS4zWiIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4mI3hhOyAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTMyIDEzLjljMC0uNi4yLTEuMS41LTEuNi40LS40LjgtLjggMS40LTEgLjYtLjMgMS4zLS40IDIuMS0uNGE5LjMgOS4zIDAgMCAxIDIuNS40di0uNmEyIDIgMCAwIDAtLjYtMS42Yy0uNC0uMy0xLS41LTEuNy0uNS0uNiAwLTEgMC0xLjUuMy0uNS4xLTEgLjQtMS41LjdsLS43LTEuMyAxLjktMSAyLS4yYzEuMiAwIDIuMi4zIDMgMSAuNy42IDEgMS42IDEgMi44djMuNWwuMS41LjUuMXYxLjZhNC4zIDQuMyAwIDAgMS0uOS4xYy0uNCAwLS43IDAtMS0uMy0uMi0uMi0uMy0uNC0uMy0uN3YtLjVhNC42IDQuNiAwIDAgMS0zLjUgMS43Yy0uNyAwLTEuMi0uMi0xLjctLjVhMyAzIDAgMCAxLTEuMi0xYy0uMy0uNS0uNC0xLS40LTEuNVptNiAuNi4zLS41LjItLjR2LTEuMWwtMS4xLS4zLTEuMS0uMWMtLjcgMC0xLjMuMS0xLjguNC0uNC4zLS42LjctLjYgMS4yYTEuNiAxLjYgMCAwIDAgLjggMS40Yy4zLjIuNy4zIDEuMS4zYTMuMSAzLjEgMCAwIDAgMi4yLTFaTTUxLjMgMTYuNmgtMnYtNS4yYzAtMS0uMS0xLjYtLjQtMi0uMy0uNC0uNy0uNi0xLjMtLjYtLjQgMC0uNy4xLTEuMS4zbC0xIC44LS43IDEuMXY1LjZoLTJWNy4yaDEuOHYyYy4zLS41LjYtLjkgMS0xLjJhNC41IDQuNSAwIDAgMSAyLjktMWMuNSAwIDEgLjIgMS40LjQuMy4yLjYuNC44LjhsLjUgMS4ydjcuMlpNNTcgMTYuOGMtLjkgMC0xLjYtLjEtMi4zLS40LS43LS4yLTEuMy0uNi0xLjgtMS4xbC43LTEuNGMuNS41IDEgLjkgMS42IDEgLjYuMyAxLjEuNCAxLjcuNC41IDAgMS0uMSAxLjMtLjMuNC0uMi41LS41LjUtMSAwLS4yIDAtLjUtLjItLjZsLS44LS40LTEuMy0uMy0xLjYtLjdhMi4xIDIuMSAwIDAgMS0xLjQtMmMwLS43LjEtMS4yLjUtMS42YTMgMyAwIDAgMSAxLjMtMWMuNS0uMiAxLjItLjMgMS45LS4zczEuMyAwIDEuOS4zYTQgNCAwIDAgMSAxLjUgMWwtLjggMS4zYy0uNC0uNC0uOS0uNy0xLjMtLjlhMy42IDMuNiAwIDAgMC0yLjItLjFjLS4zIDAtLjUuMS0uNy4zLS4yLjItLjMuNC0uMy43IDAgLjMuMS41LjMuN2wuNi4zIDEgLjQgMiAuN2MuNS4yLjkuNCAxLjEuOC4zLjMuNS43LjUgMS4zIDAgMS0uNCAxLjYtMSAyLjItLjcuNS0xLjYuNy0yLjguN1pNNzQgNy4yaDEuOWwtNCA5LjRoLTEuN2wtMS43LTQuMi0xLjcgNC4yaC0xLjdsLTQtOS40aDJsMyA3LjUgMS4zLTMuNS0xLjYtNGgxLjdsMSAzIDEtM2gxLjdsLTEuNiA0IDEuNCAzLjUgMy03LjVaTTgyLjIgMTYuOGgtMmE1IDUgMCAwIDEtMy0yIDUuMSA1LjEgMCAwIDEtLjctNC4zIDQuNyA0LjcgMCAwIDEgMy43LTMuM2MxLS4yIDEuOS0uMSAyLjYuMi44LjMgMS41LjcgMiAxLjRhNC45IDQuOSAwIDAgMSAxLjIgMi45bC03LjQgMS41Yy4xLjUuNCAxIC43IDEuMy40LjQuOC42IDEuMy44aDEuM2EzIDMgMCAwIDAgMS40LS43Yy40LS4zLjctLjcuOC0xLjJsMS43LjJjMCAuNC0uMyAxLS42IDEuNGE0LjcgNC43IDAgMCAxLTMgMS44Wm0tNC00LjkgNS43LTEuMWMtLjItLjYtLjQtMS0uOC0xLjMtLjMtLjQtLjctLjYtMS4yLS44LS40LS4xLTEtLjItMS40IDAtLjUgMC0xIC4zLTEuMy42bC0uOCAxLjFhMyAzIDAgMCAwLS4xIDEuNVpNOTQgOS4yYy0uOCAwLTEuNS4yLTIgLjUtLjcuMy0xIC44LTEuMyAxLjRWMTdoLTJWNy41aDEuOHYyYy4zLS42LjgtMSAxLjMtMS41YTMgMyAwIDAgMSAxLjctLjZoLjV2MS44Wk05OC44IDE3Yy0uOCAwLTEuNiAwLTIuMy0uMy0uNy0uMy0xLjMtLjctMS44LTEuMmwuNy0xLjNjLjYuNSAxLjEuOCAxLjcgMSAuNS4yIDEgLjMgMS42LjMuNSAwIDEgMCAxLjMtLjMuNC0uMi42LS41LjYtLjkgMC0uMy0uMS0uNS0uMy0uN2wtLjgtLjMtMS4yLS40LTEuNy0uNmMtLjUtLjMtLjgtLjUtMS0uOS0uMy0uMy0uNC0uNy0uNC0xLjIgMC0uNi4yLTEuMS41LTEuNmEzIDMgMCAwIDEgMS4zLTFjLjUtLjIgMS4yLS4zIDItLjNsMS44LjNhNCA0IDAgMCAxIDEuNiAxbC0uOSAxLjNjLS40LS40LS44LS43LTEuMy0uOGEzLjYgMy42IDAgMCAwLTIuMi0uMmMtLjMgMC0uNS4yLS43LjRsLS4yLjdjMCAuMiAwIC40LjIuNi4xLjIuMy4zLjYuNGwxLjEuNCAxLjkuNmMuNS4yLjkuNSAxLjIuOC4yLjMuNC44LjQgMS40IDAgLjktLjQgMS42LTEgMi4xLS43LjUtMS42LjgtMi43LjhaIi8+JiN4YTs8L3N2Zz4=" preserveAspectRatio="none"/></g></svg>
In this case, we did not import react-native-svg because the provided code uses a regular Image component to render the SVG image. React Native's Image component can handle rendering SVG images without the need for react-native-svg package.
Free Resources