carbon 5
Mobile DevelopmentFrontend Development

Using SVGs properly in React Native

2 Mins read

Using SVGs in a React Native project can take your app’s design to the next level. SVGs are perfect for icons, logos, and other graphics because they look great on any screen size and are super lightweight. Let me show you how I integrate SVGs into my projects.

Why SVGs?

First, let’s talk about why SVGs are awesome:

  1. Scalability: SVGs look sharp on any device, from tiny phone screens to huge tablets.
  2. Performance: They’re usually smaller in size than regular images, so they load faster.
  3. Flexibility: You can style and animate them with CSS and JavaScript, giving you a lot of creative freedom.

Setting Up SVG Support in React Native

Getting SVGs to work in either a managed expo or barebones React Native is pretty straightforward. Here’s a step-by-step guide to get you started.

Step 1: Install Required Packages

You’ll need two packages: react-native-svg and react-native-svg-transformer. Install them by running:

npm install react-native-svg #lets expo pick a compatible version

npm install --save-dev react-native-svg-transformer

react-native-svg lets you use SVG elements in your React Native code, and react-native-svg-transformer makes it possible to import SVG files directly like this:

import Logo from "./logo.svg";

Step 2: Configure Metro

Next, we need to set up Metro (the React Native bundler) to handle SVG files. Create or edit the metro.config.js file in your project root:

const { getDefaultConfig } = require('expo/metro-config');

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  config.resolver = {
    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg').concat('cjs'),
    sourceExts: [...resolver.sourceExts, 'svg']

  return config;

This setup tells Metro to use the SVG transformer and ensures it handles .svg files correctly.

Also Read:  Top Javascript frameworks for frontend development in 2022

Step 3: Using SVGs in Your Project

Now that everything’s set up, you can start using SVGs in your components.

import React from 'react';
import { View, Text } from 'react-native';
import Svg, { Circle, Rect } from 'react-native-svg';
import Logo from './assets/logo.svg'; // Importing an SVG file

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Welcome to My React Native App</Text>
      <Logo width={100} height={100} />
      <Svg height="100" width="100">
        <Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
        <Rect x="15" y="15" width="70" height="70" stroke="red" strokeWidth="2" fill="yellow" />

export default App;

In this example, Logo is an SVG file, and we’re also drawing custom SVG shapes using react-native-svg components.

Advanced Usage

Styling SVGs

You can style your SVGs with props or by using CSS-in-JS libraries like styled-components

import styled from 'styled-components/native';
import Logo from './assets/logo.svg';

const StyledLogo = styled(Logo)`
  width: 150px;
  height: 150px;
  fill: #000;

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <StyledLogo />

Animating SVGs

Animating SVG elements can make your app more dynamic. You can use libraries like react-native-reanimated or react-spring.

import React from 'react';
import { Animated } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const App = () => {
  const animation = new Animated.Value(0);

  React.useEffect(() => {
        Animated.timing(animation, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true
        Animated.timing(animation, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true
  }, []);

  const animatedRadius = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [20, 50]

  return (
    <Svg height="100" width="100">
      <AnimatedCircle cx="50" cy="50" r={animatedRadius} stroke="blue" strokeWidth="2.5" fill="green" />

export default App;

Wrapping Up

Using SVGs in React Native makes your app look crisp and professional. With react-native-svg and react-native-svg-transformer, you can easily add and animate SVG graphics. Whether you’re adding icons, logos, or custom illustrations, SVGs provide the flexibility and quality your app needs to stand out. Don’t forget to give me a Twitter Follow if this proved useful to you.

Also Read:  Flutter vs React Native

11 posts

About author
Oluwaseun Raphael Afolayan is an Established Software craftsman and Technical Writer with over 5 years of experience building and documenting tech solutions for startups. He enjoys running around sweaty PUBG-mobile lobbies in his spare time.
Related posts
Frontend Development

Supercharging Javascript Arrays With the Spread Operator

1 Mins read
The spread operator can turn the elements of an array into elements of a function call or into elements of another array…
Frontend Development

Top Javascript frameworks for frontend development in 2022

2 Mins read
JavaScript frameworks are becoming more and more popular for frontend development. In this post, we’ll take a look at the top 10…
Mobile DevelopmentArticlesGeneral

Flutter vs React Native

7 Mins read
With the upsurge of mobile apps, the demand for cross-platform app development has increased mainly in recent years. React Native and Flutter…
Subscribe to more programming tutorials

Be the first to get notifications of byte-sized articles to make you a better programmer.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.