Adding SVGs in React Native Expo
Adebayo Temitope
Posted on February 19, 2021
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>
)
}
That's all, Your SVG file would work.
💖 💪 🙅 🚩
Adebayo Temitope
Posted on February 19, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
