AliIybar: Created page with "Category:ReactNative Category:expo Category:svg 1 - install these libraties * npx expo install react-native-svg * npm install --save-dev react-native-svg-transfor..."

2025-05-31T07:31:51Z

Created page with "Category:ReactNative Category:expo Category:svg 1 - install these libraties * npx expo install react-native-svg * npm install --save-dev react-native-svg-transfor..."

New page

[[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>

Using SVG in expo react native app - Revision history

AliIybar: Created page with "Category:ReactNative Category:expo Category:svg 1 - install these libraties * npx expo install react-native-svg * npm install --save-dev react-native-svg-transfor..."