How to Use SVGs in React Native

Using SVGs (Scalable Vector Graphics) in React Native can greatly enhance the quality of your app’s visuals. SVGs are resolution-independent and can be scaled without losing quality, making them an excellent choice for icons, logos, and illustrations. In this blog, we will explore how to use SVGs in React Native, along with sample code and references to helpful resources.

Why Use SVGs?

1. Scalability: SVGs are vector-based, meaning they can be scaled to any size without losing quality.
2. Performance: SVGs can be more performant than using multiple raster images at different resolutions.
3. Styling: SVGs can be styled using CSS or JavaScript, offering greater flexibility.
4. File Size: SVGs are often smaller in file size compared to high-resolution raster images.

Getting Started

To use SVGs in React Native, we will use the react-native-svg library. This library provides SVG support for React Native and allows you to use SVG files as React components.

Installation

First, install the react-native-svg library:

npm install react-native-svg

If you’re using Expo, the library is already included. If not, you might need to link the library manually:

npx react-native link react-native-svg

Next, install react-native-svg-transformer to support importing SVG files directly:

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

Configuration

For React Native CLI users, configure Metro to use the SVG transformer. Create or update the metro.config.js file in the root of your project:

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']
    }
  };
})();

For Expo users, add the transformer to app.json:

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

Using SVGs in Your Project

1. Create an SVG file: Save your SVG file in the assets folder (or any other directory).
2. Import the SVG: Use the SVG in your component by importing it as a React component.

Here’s an example:

assets/icon.svg

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

App.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Icon from './assets/icon.svg'; // Importing the SVG

export default function App() {
  return (
    <View style={styles.container}>
      <Icon width={100} height={100} /> {/* Using the SVG as a component */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Styling SVGs

You can style SVGs using the style prop or by passing attributes directly:

<Icon width={100} height={100} fill="red" style={{ margin: 10 }} />

Advanced Usage

You can also manipulate SVGs dynamically by using props and state:

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Icon from './assets/icon.svg';

export default function App() {
  const [color, setColor] = useState('blue');

  const changeColor = () => {
    setColor(color === 'blue' ? 'green' : 'blue');
  };

  return (
    <View style={styles.container}>
      <Icon width={100} height={100} fill={color} />
      <Button title="Change Color" onPress={changeColor} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Resources

• React Native SVG Documentation
• Expo Documentation
• React Native SVG Transformer

Conclusion:

Using SVGs in React Native can significantly improve your app’s visuals and performance. With the react-native-svg library, you can easily integrate and manipulate SVGs in your projects. Follow the steps above to get started and explore the possibilities that SVGs offer in your React Native applications.

🌟 Thank You for Reading!

• 🚀 Support my work by clicking on this link: Support Me 🌟
• 👏 Show your appreciation by giving the article a round of applause.
• 📌 Follow Avishek Kumar for more insightful content.

📣 Stay Engaged

• 🔔 Follow Us on Twitter(X)
• 🔔 Follow Us on GitHub 🥷
• 🔗 Connect on LinkedIn

Stackademic 🎓

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us X | LinkedIn | YouTube | Discord
• Visit our other platforms: In Plain English | CoFeed | Differ
• More content at Stackademic.com