View source for Using SVG in expo react native app

[[Category:ReactNative]]
[[Category:expo]]
[[Category:svg]]

1 - install these libraties
* npx expo install react-native-svg
* npm install --save-dev react-native-svg-transformer
2 - Add '''metro.config.js''' in the root
<pre>
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;
})();
</pre>
3 - if it's a typescript project add '''declarations.d.ts''' in the root
<pre>
declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}
</pre>
4 - run the project with '''npx expo start'''

5 - Use like this

<pre>
import Destination from '../../assets/images/svg/destination.svg'
...
 <Destination width={100} height={100} />
</pre>