How to use local SVG file and color it in React Native

The methods for using and coloring SVG files in React Native are as follows:

Step 1: Install Required Libraries

React Native does not natively support SVG files, so we must install third-party libraries to handle SVG processing. The most commonly used libraries are react-native-svg and react-native-svg-transformer. First, install these libraries:

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

Step 2: Configure Metro Bundler

After installing the libraries, configure Metro (React Native's bundler) to recognize SVG files. Locate the metro.config.js file in the project's root directory and add the configuration for react-native-svg-transformer:

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

Step 3: Use SVG Files

Now SVG files can be used in React Native. You can import and use SVG as a component directly. For example, suppose you have an SVG file named logo.svg:

jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Logo from './path/to/logo.svg';  // Import SVG file

const App = () => {
  return (
    <View style={styles.container}>
      <Logo width={120} height={120} fill="red" />
    </View>
  );
}

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

export default App;

In the above example, the <Logo /> component represents the SVG file. You can handle it like any regular React component, including setting its width, height, and fill properties to adjust its size and color.

Summary

Through these steps, you can easily import and use SVG files in React Native projects. By modifying the properties of the SVG component, you can apply colors to SVG graphics. This approach leverages the strengths of React Native and JavaScript to dynamically handle SVG styling and event responses.