1expo install react-native-svg
2yarn add --dev @hitbit/expo-svg-transformer @expo/webpack-config

app.json

1"packagerOpts": {
2  "config": "metro.config.js",
3  "sourceExts": ["js", "jsx", "ts", "tsx", "svg"]
4}

metro.config.js

1const { getDefaultConfig } = require('metro-config');
2
3module.exports = (async () => {
4  const { resolver: defaultResolver } = await getDefaultConfig();
5  const { sourceExts, assetExts } = defaultResolver;
6
7  return {
8    transformer: {
9      babelTransformerPath: require.resolve('@hitbit/expo-svg-transformer'),
10    },
11    resolver: {
12      assetExts: assetExts.filter(ext => ext !== 'svg'),
13      sourceExts: [...sourceExts, 'svg'],
14    },
15  };
16})();

webpack.config.js

1const createExpoWebpackConfigAsync = require('@expo/webpack-config');
2
3const svgRule = {
4  test: /\.svg$/,
5  exclude: /node_modules/,
6  use: [
7    'babel-loader',
8    '@hitbit/expo-svg-transformer',
9  ],
10};
11
12module.exports = async (env, argv) => {
13  const expoWebpackConfig = await createExpoWebpackConfigAsync(env, argv);
14
15  expoWebpackConfig.module.rules[1].oneOf.unshift(svgRule);
16
17  return expoWebpackConfig;
18};

App.js

1import React from 'react';
2import { View } from 'react-native';
3import Logo from './assets/Logo.svg';
4
5export default function App() {
6  return (
7    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
8      <Logo height={50} width={50} />
9    </View>
10  );
11}

Without Expo

1. yarn add react-native-svg && yarn add --dev @hitbit/expo-svg-transformer
2. Use the same metro.config.js