React Native Svg A Guide To Use SVG Class In React Native

React Native is a leading platform for building high-fidelity, cross-platform mobile applications. The ecosystem is rapidly expanding with new features, and a significant recent addition is robust SVG support in React Native. This article will guide you through using SVG images in your React Native app, exploring various tools and components.

What is SVG?

SVG stands for Scalable Vector Graphics. It’s an image format based on XML, defining two-dimensional graphics with mathematical formulas rather than pixels. This vector-based nature offers several key advantages:

• Scalability: SVG images can be scaled up or down to any size without losing quality or becoming pixelated, making them perfect for responsive designs across different screen resolutions.
• Flexibility: Elements within an SVG can be moved, rotated, and manipulated in 2D space without degradation.
• Lightweight: SVG files are often smaller than bitmap images (like PNGs or JPEGs) for complex graphics, leading to faster load times.
• Interactivity: SVGs can be manipulated with JavaScript and styled with CSS, enabling dynamic and interactive graphics.

Initially developed by the World Wide Web Consortium (W3C), SVG provides a universal language for creating consistent graphical elements across web browsers, mobile devices, and monitors.

Using SVG in React Native with react-native-svg

While web developers can use SVG directly in browsers, React Native requires a dedicated library to render SVG elements as native components. The most popular and comprehensive solution for this is the react-native-svg library.

Installation

To get started, you need to add the react-native-svg module to your project. Open your terminal in your project’s root directory and run:

npm install react-native-svg
# or
yarn add react-native-svg

After installation, for bare React Native projects, you might also need to link the native modules:

npx react-native link react-native-svg

For Expo projects, react-native-svg is often pre-installed or automatically linked.

Importing SVG Files as Components

The react-native-svg library allows you to import .svg files directly as React components using a Babel plugin or by configuring your bundler. This is a common and highly recommended approach for using static SVG assets.

First, you’ll need to install react-native-svg-transformer and react-native-fast-image (for Hermes if you’re using it):

npm install react-native-svg-transformer react-native-fast-image
# or
yarn add react-native-svg-transformer react-native-fast-image

Then, configure your metro.config.js file:

// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

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

module.exports = mergeConfig(getDefaultConfig(), config);

Now, you can import your .svg files directly like any other component:

import React from 'react';
import { View } from 'react-native';
import MyIcon from './assets/my-icon.svg'; // Assuming my-icon.svg is in the assets folder

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <MyIcon width={100} height={100} fill="blue" />
    </View>
  );
};

export default App;

You can pass props like width, height, and fill directly to your imported SVG component to control its size and color.

Drawing Custom SVG Shapes with react-native-svg Components

Beyond importing existing SVG files, react-native-svg provides a set of primitive SVG components that allow you to draw custom vector graphics directly within your React Native code. This is similar to drawing on a canvas, but with the scalability benefits of SVG.

You’ll import these components from the react-native-svg library:

import Svg, { Circle, Rect, Line, Ellipse, G, Image, LinearGradient, Stop, Defs } from 'react-native-svg';

Here’s a breakdown of some essential components:

• <Svg>: The root SVG container. All other SVG elements must be nested inside it. You specify the width and height for the SVG viewport.
• <Circle>: Draws a circle.
  • cx, cy: Center coordinates.
  • r: Radius.
  • fill: Fill color.
  • stroke, strokeWidth: Border color and thickness.
• <Rect>: Draws a rectangle.
  • x, y: Top-left corner coordinates.
  • width, height: Dimensions.
  • rx, ry: Horizontal and vertical corner radii for rounded rectangles.
• <Ellipse>: Draws an ellipse.
  • cx, cy: Center coordinates.
  • rx, ry: Horizontal and vertical radii.
• <Line>: Draws a straight line.
  • x1, y1: Start point coordinates.
  • x2, y2: End point coordinates.
  • stroke, strokeWidth: Line color and thickness.
• <G> (Group): Used to group elements. Applying transformations (like rotation, scaling) or styles to a <G> component affects all its children. This is great for organizing complex drawings.
• <Image>: Embeds raster images (like PNG, JPEG) within an SVG.
  • href: URI to the image file.
  • x, y: Position of the top-left corner.
  • width, height: Dimensions of the embedded image.
• <LinearGradient>: Creates a linear color transition that can be applied to shapes.
  • id: A unique ID to reference the gradient from other elements.
  • x1, y1, x2, y2: Define the gradient vector.
  • <Stop>: Defines a color stop within the gradient.
    • offset: Position of the color stop (e.g., “0%”, “50%”, “1”).
    • stopColor: Color at that stop.
• <Defs>: Used to store graphical objects that will be used multiple times, such as gradients or patterns. Elements defined inside <Defs> are not rendered directly but can be referenced by other SVG elements using their id.

Example of Drawing Shapes:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Circle, Rect, Line, Ellipse, G, Image, LinearGradient, Stop, Defs } from 'react-native-svg';

const CustomSvgExample = () => {
  return (
    <View style={styles.container}>
      <Svg height="200" width="200" viewBox="0 0 200 200">
        {/* Draw a red circle */}
        <Circle cx="50" cy="50" r="40" fill="red" />

        {/* Draw a blue rectangle with rounded corners */}
        <Rect x="100" y="20" width="80" height="60" fill="blue" rx="10" ry="10" />

        {/* Draw a green line */}
        <Line x1="10" y1="100" x2="190" y2="100" stroke="green" strokeWidth="2" />

        {/* Grouped elements with a rotation */}
        <G rotation="45" origin="150,150">
          <Ellipse cx="150" cy="150" rx="30" ry="20" fill="purple" />
          <Rect x="130" y="140" width="40" height="20" fill="orange" />
        </G>

        {/* Linear Gradient Example */}
        <Defs>
          <LinearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
            <Stop offset="0" stopColor="rgb(255,0,0)" stopOpacity="1" />
            <Stop offset="1" stopColor="rgb(0,0,255)" stopOpacity="1" />
          </LinearGradient>
        </Defs>
        <Rect x="10" y="160" width="180" height="30" fill="url(#gradient)" />
      </Svg>
    </View>
  );
};

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

export default CustomSvgExample;

Conclusion

SVG support in React Native, primarily through the react-native-svg library, provides a powerful and flexible way to incorporate high-quality vector graphics into your mobile applications. Whether you’re importing pre-made SVG icons or drawing custom shapes programmatically, leveraging SVG ensures your graphics remain sharp and crisp across all device screens. This capability is crucial for building modern, high-fidelity cross-platform apps. Feel free to contact us