Using SVGs properly in React Native

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 = {
    ...transformer,
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  };
  config.resolver = {
    ...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.

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" />
      </Svg>
    </View>
  );
};

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 />
    </View>
  );
};

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.loop(
      Animated.sequence([
        Animated.timing(animation, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true
        }),
        Animated.timing(animation, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true
        })
      ])
    ).start();
  }, []);

  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" />
    </Svg>
  );
};

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.