Reputation: 113
I'm trying to use svg images on my native react application, I'm developing on Android.
So I followed this tutorial =>
https://medium.com/faun/add-custom-svg-icons-to-your-expo-app-279b492f6a15
I have an error Unable to read the 'fill' property of undefined while I manage to display the image, so I try to downgrade the version of react-native- svg and the image is displayed but as soon as I integrated react-navigation my application expo on crash at startup.
So I looked for a long time for the cause of this crash.
I tried to delete the react-native-svg library, the metroconfig.js file, and expo worked again, I don't know if this was the cause of the problem.
I would like to know if people have encountered these problems or if not what is the best method which works with the current version of RN to import a svg image in a react-native application?
Thank you in advance for your help and your answers.
EDIT
I tested react-native-svg and react-native-transformer-svg with the latest version of react native / expo / sdk expo
From the moment I create the metro.config.js file and link it with expo by updating the app.json file, my expo application crashes at startup.
I had to use react-native-svg without react-native-transformer-svg, that is to say that I have to convert an SVG file into a reactable SVG file.
If someone has a working solution to import svg files automatically, it would be of great help to me.
Upvotes: 7
Views: 7669
Reputation: 529
Important Note - I develop on a real Android device, not in Expo!
Here is some code from an issue opened on Github that actually worked for me after some modification.
In my metro.config.js
file I finally have this code:
const { getDefaultConfig } = require("metro-config")
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig()
// here I extend the extensions needed for RN because I use JSX.
// you don't need this if you use pure JS files
const updatedSourceExts = [...sourceExts, "jsx", "js", "json", "ts", "tsx"]
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("react-native-svg-transformer"),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...updatedSourceExts, "svg"],
},
}
})()
A part of my package-json
file:
Upvotes: 1
Reputation: 787
Install react-native-svg-transformer
npm i react-native-svg-transformer --save
I'm using SVG as following and it works fine
import LOGOSVG from "assets/svg/logo.svg"
in render
<View>
<LOGOSVG
width="100%"
height="70%"
/>
</View>
Upvotes: 0