Adding SVGs in React Native Expo

#javascript #react #reactnative #beginners

As a developer you would have definitely worked with an SVG (Scalable Vector Graphics) in any project you're working on but in React Native (Expo) SVGs needs extra steps to work on an app.

1. Create Your App

expo init test-svg

2. Move into the app folder

cd test-svg

3. Add 'react-native-svg'

npm i react-native-svg

4. Create a JS file 'TestSvg.js'

Paste the following Code below

import * as React from "react";
import { SvgXml } from "react-native-svg";

export default function TestSvg(){  
  const svgcode = `paste your <svg> code here`;
  const Svg = () => <SvgXml xml={svgcode} width="set the width here" 
  height="set the height here" />;  

  return <Svg />;
}

5. Import into your 'App.js' file

You can add to any other file

import * as React from "react";
import { View } from "react-native";
import TestSvg from "./TestSvg";

export default function App() {
return (
  <View>
    <TestSvg />
  </View>
 )
}