This content originally appeared on DEV Community and was authored by Malik Khalil
Using SVG files in your React Native projects can be as straightforward as using them in web applications. The react-native-svg-transformer library makes this possible by transforming your imported SVG images into React components. This guide will walk you through the installation, configuration, and usage of react-native-svg-transformer in your React Native projects.
Benefits
- Consistency: Use the same SVG files for both React Native and web projects.
- Flexibility: Easily import and use SVG files as React components.
Step-by-Step Installation and Configuration
Step 1: Install react-native-svg Library
First, ensure you have the react-native-svg library installed. This library provides the necessary components to render SVG images in React Native.
To install, run:
npm install react-native-svg
or
yarn add react-native-svg
For detailed installation instructions, refer to the react-native-svg GitHub page.
Step 2: Install react-native-svg-transformer Library
Next, install the react-native-svg-transformer library, which will transform your SVG files into React components.
To install, run:
npm install --save-dev react-native-svg-transformer
or
yarn add --dev react-native-svg-transformer
Step 3: Configure the React Native Packager
Depending on your setup (Expo or React Native CLI), the configuration will differ. Below are the configurations for different environments:
For Expo SDK v41.0.0 or Newer
Create or update your metro.config.js file with the following configuration:
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/expo")
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"]
};
return config;
})();
For React Native v0.72.1 or Newer
Create or update your metro.config.js file with the following configuration:
const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;
/**
* Metro configuration
* https://reactnative.dev/docs/metro
*
* @type {import('metro-config').MetroConfig}
*/
const config = {
transformer: {
babelTransformerPath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
module.exports = mergeConfig(defaultConfig, config);
For React Native v0.59 or Newer
Create or update your metro.config.js file with the following configuration:
const { getDefaultConfig } = require("metro-config");
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve(
"react-native-svg-transformer/react-native"
)
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
React Native Projects Using Expo Modules
For projects using Expo modules without expo-cli, you may need to adjust the transformer path to correctly use React Native's transformer:
-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/react-native")
Alternatively, force Expo's transformer to always be used:
-require.resolve("react-native-svg-transformer")
+require.resolve("react-native-svg-transformer/expo")
Using TypeScript
If your project uses TypeScript, you need to declare the module for SVG files. Add the following to your declarations.d.ts file (create it if it doesn't exist):
declare module "*.svg" {
import React from "react";
import { SvgProps } from "react-native-svg";
const content: React.FC<SvgProps>;
export default content;
}
Usage
After installation and configuration, you can import and use SVG files in your React components just like any other component.
Example:
-
Import the SVG file:
import Logo from "./logo.svg"; -
Use the SVG as a component:
<Logo width={120} height={40} />
Additional Resources
- Demo Projects:
By following this guide, you should be able to seamlessly integrate SVG files into your React Native projects, enhancing your development workflow and maintaining consistency across different platforms.
Follow me for more articles!
This content originally appeared on DEV Community and was authored by Malik Khalil
Malik Khalil | Sciencx (2024-07-23T21:10:48+00:00) Importing SVG Files in React Native Projects: A Comprehensive Guide. Retrieved from https://www.scien.cx/2024/07/23/importing-svg-files-in-react-native-projects-a-comprehensive-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.