CODEWITHSUNDEEP
androidreact-nativesvg
CallMeMrHyde
CallMeMrHyde

Reputation: 113

How to use svg images on react-native?

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

Answers (2)

tonkatata
tonkatata

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.

Link to Github issue

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:

  • "react-native": "0.63.2",
  • "react-native-svg": "^12.1.0",
  • "react-native-svg-transformer": "^0.14.3"

Upvotes: 1

Dishant Chanchad
Dishant Chanchad

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

Related Questions