question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-native-svg-transformer not working with expo

See original GitHub issue

“react-native-svg”: “8.0.10”, (inside expo’s package.json) react-native “version”: “0.57.1” expo “version”: “32.0.6” “react-native-svg-transformer”: “^0.12.1”

metro.config.js:


module.exports = (async () => {
    const {
        resolver: { sourceExts, assetExts }
    } = await getDefaultConfig();
    console.log('source exts: ', sourceExts);
    return {
        transformer: {
            babelTransformerPath: require.resolve("react-native-svg-transformer")
        },
        resolver: {
            assetExts: assetExts.filter(ext => ext !== "svg"),
            sourceExts: [...sourceExts, "svg"]
        }
    };
})();

packagerOpts inside app.json:

{
  "expo": {
    "packagerOpts": {
      "config": "metro.config.js"
    },
    "name": "Plogalong",
    "slug": "plogalong",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

metro.config.js and app.json are at the same level.

Inside the component: import { BackPacker } from '../assets/icons/backpacker.svg';

This is resulting in the following error: image

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:16 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
kristerkaricommented, Mar 31, 2019

I created a new Expo project, installed react-native-svg-transformer, added Metro config, and added the code to import an SVG image. It’s working for me at least.

Here’s the repo if you want to have a look at the setup: https://github.com/kristerkari/react-native-svg-expo-example

1reaction
kristerkaricommented, Mar 29, 2019

I haven’t had time to look at it yet because I have been really busy with things this week, but I’ll try to have a look at it this weekend.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use SVGs - Expo Documentation
React Native SVG transformer allows compile-time transformation to make SVG files compatible with React. Follow the installation steps to configure your Expo ......
Read more >
react-native-svg-transformer not working with the metro.config ...
I tried restarting with npm start -- --reset-cache and after playing around with the config file, I noticed that it was the async...
Read more >
Working with SVGs in React Native - OpenReplay Blog
* as React from "react"; · Svg, { Path } · "react-native-svg" · const Loader = (props) => ( <Svg ; { StatusBar...
Read more >
react-native-svg-transformer examples - CodeSandbox
Learn how to use react-native-svg-transformer by viewing and forking ... kiyohken2000/ReactNative-Expo-Firebase-Boilerplate-v2 ... Issues Count178. Stars908.
Read more >
How to import SVG files in React Native using react-native-svg
Rendering SVGs in mobile apps is not as simple as on the web, where you can use SVG directly as an image source...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found